Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

URLフラグメントに一致するid値を持つ要素を取得するには? ― :targetフィルター

2016年4月28日

:targetフィルターを使って、URLフラグメントに一致するid属性値の要素を取得する方法を説明する。

  • このエントリーをはてなブックマークに追加

 URLフラグメントとは、「~sample.html#hoge」であれば、hogeの部分のことです。:targetフィルターは、URLフラグメントに一致するid値の要素を取り出すためのフィルターです。

 例えば以下では、:targetフィルターを利用したURLフラグメントで指定された要素を枠囲みしています。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div id="main">
  <p>WINGSプロジェクトは、ライター山田祥寛が代表を務める執筆コミュニティです。</p>
  <p>当初、ライター山田祥寛のサポート(検証・査読・校正作業)集団という位置づけで開始されたコミュニティでした。</p>
</div>
<div id="sub">
  <p>現在、WINGSプロジェクトでは、ご一緒にお仕事ができる仲間を募集中です。</p>
</div>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
  setTimeout(function(){
    $(':target').css('border', 'solid 5px Red');
  }, 1);
});
</script>
</body>
</html>
URLフラグメントから対象の要素を特定するためのコード(target.html)

 このページに対して、「~target.html#main」でアクセスした結果が以下です。

「~target.html#main」でアクセスした結果
「~target.html#main」でアクセスした結果

 「~target.html#sub」のようにフラグメントを変更することで、結果も変化します。

「~target.html#sub」でアクセスした結果
「~target.html#sub」でアクセスした結果

 setTimeoutメソッドで1ミリ秒のタイムラグを設けているのは、Chrome環境(執筆時点ではバージョン50)ではページロードのタイミングでは:targetを認識できないためです。筆者環境で確認した範囲では、Internet Explorer/Firefoxなどの環境では、この問題はないようです。

処理対象:jQueryオブジェクト カテゴリ:コア
API:jQuery()|$() カテゴリ:Core(コア)
処理対象:基本フィルター カテゴリ:セレクター
API::targetフィルター カテゴリ:Selectors(セレクター) > Basic Filter(基本フィルター)

※以下では、本稿の前後を合わせて5回分(第42回~第46回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
42. 子要素の型/順番によって取得すべき要素を絞り込むには? ― 子要素フィルター

:first-of-type/:last-of-typeフィルターにより同じ要素の中で先頭/末尾の子要素を、また:only-of-typeフィルターにより同列の子要素に同種の要素が1つしかないものを、さらに:nth-of-type/nth-last-of-typeフィルターにより同じ要素の中でn番目の要素を取得する方法を解説。

jQuery逆引きリファレンス
43. 指定された言語に対応する要素を取得するには? ― :langフィルター

:langフィルターを使って、コンテンツの言語を指定するlang属性の値に応じて要素を取得する方法を説明する。

jQuery逆引きリファレンス
44. 【現在、表示中】≫ URLフラグメントに一致するid値を持つ要素を取得するには? ― :targetフィルター

:targetフィルターを使って、URLフラグメントに一致するid属性値の要素を取得する方法を説明する。

jQuery逆引きリファレンス
45. ページのスクロール位置を設定/取得するには?(scrollTop/scrollLeft)

scrollTop/scrollLeftメソッドを使ってページスクロールの垂直位置/水平位置を設定もしくは取得するための基本的な方法を説明する。

jQuery逆引きリファレンス
46. 要素の表示位置を取得/設定するには?(offset)

offsetメソッドを使って、要素の「ドキュメント上の相対位置」を取得/設定する基本的な方法を説明する。

サイトからのお知らせ

Twitterでつぶやこう!