sidebar (1)
サイドバーに移動。「フォーカス」にフォーカスする。
sidebar (2)
サイドバーに移動。「フォーカス」にフォーカスする。このブログを検索にフォーカスする。
sidebar (3)
サイドバーに移動。このブログを検索にフォーカスする。
sidebar (4)
サイドバーに移動。このブログを検索にフォーカスする。
(このブログを検索より下に'#sidebar input.gsc-input'にマッチするものは無い。)
ソース。
<input class="gsc-input" type="text" value="フォーカス" style="width: 8em; border: 1px solid gray; margin: 0; padding: 0.5em;" readonly="readonly"></input> <a href="#sidebar" onclick="javascript: try{(function(){ setTimeout(function(){ $('input.gsc-input').each(function(){ $(this).focus(); return false; }); },170); })();}catch(e){} " target="_top">sidebar (1)</a> サイドバーに移動。<strong>「フォーカス」</strong>にフォーカスする。 <a href="#sidebar" onclick="javascript: try{(function(){ setTimeout(function(){ $('input.gsc-input').each(function(){ $(this).focus(); return true; }); },170); })();}catch(e){} " target="_top">sidebar (2)</a> サイドバーに移動。<strong>「フォーカス」</strong>にフォーカスする。<strong>このブログを検索</strong>にフォーカスする。 <a href="#sidebar" onclick="javascript: try{(function(){ setTimeout(function(){ $('#sidebar input.gsc-input').each(function(){ $(this).focus(); return false; }); },170); })();}catch(e){} " target="_top">sidebar (3)</a> サイドバーに移動。<strong>このブログを検索</strong>にフォーカスする。 <a href="#sidebar" onclick="javascript: try{(function(){ setTimeout(function(){ $('#sidebar input.gsc-input').each(function(){ $(this).focus(); return true; }); },170); })();}catch(e){} " target="_top">sidebar (4)</a> サイドバーに移動。<strong>このブログを検索</strong>にフォーカスする。 (<strong>このブログを検索</strong>より下に<strong>'#sidebar input.gsc-input'</strong>にマッチするものは無い。)
jqueryのeachはfalseを返すと止まります。
'input.gsc-input'と'#sidebar input.gsc-input'でヒットする数が違います。
この例ではわざと同じクラス名をつけたタグを増やしましたが、
元々クラス名は複数指定可能なので、こういった場合タグにIDをつけると良いです。
IDがある場合eachを使う必要は無いです。($("id").focus()など)
一部の古いブラウザではjqueryが動作しなかったり、
同一ページへの移動でリロードする場合があるので使えません。
参考URL。
http://semooh.jp/jquery/api/core/each/callback/
0 件のコメント:
コメントを投稿