jQuery逆引きリファレンス
指定された言語に対応する要素を取得するには？ ― :langフィルター
:langフィルターを使って、コンテンツの言語を指定するlang属性の値に応じて要素を取得する方法を説明する。
HTMLでは、グローバル属性としてlang属性を利用することで、該当する要素に含まれるコンテンツの主となる言語を指定できます。lang属性を省略した場合、直近の親要素での指定を参照しますので、ルート要素（＝<html>要素）でlang属性を指定するのが一般的です。これによって、ドキュメント全体の言語を明示できるからです。しかし、個々の要素で言語を特定したい場合には、任意の要素でlang属性を指定することもできます。
そして、これらlang属性の値に応じて、要素を取り出すのが:langフィルターの役割です。例えば以下は、それぞれlang属性がja（ja-JP）、de、enである要素に対して、それぞれ背景色を付与する例です。
|
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
</head>
<body>
<div lang="ja">こんばんは</div>
<div lang="de">Guten Abend</div>
<div lang="en">Good Evening</div>
<div lang="ja-JP">おばんです</div>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$(function() {
$('div:lang(ja)').css('background-color', 'Yellow');
$('div:lang(de)').css('background-color', 'Pink');
$('div:lang(en)').css('background-color', 'Lime');
});
</script>
</body>
</html>
|
:lang(ja) で一致するjaだけではなく、ja-JPのようなlang値にもマッチする点に注目です。
API：jQuery()｜$() カテゴリ：Core（コア）
処理対象：基本フィルター カテゴリ：セレクター
API：:langフィルター カテゴリ：Selectors（セレクター） > Basic Filter（基本フィルター）
※以下では、本稿の前後を合わせて5回分（第41回～第45回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
41. 子要素の位置関係によって取得すべき要素を絞り込むには？ ― 子要素フィルター
:first-child／:last-childフィルターにより先頭／末尾の子要素を、また:only-childフィルターにより唯一の子要素である要素を、さらに:nth-child／:nth-last-childフィルターにより先頭／末尾からn個おきに子要素を取得する方法を解説。
42. 子要素の型／順番によって取得すべき要素を絞り込むには？ ― 子要素フィルター
:first-of-type／:last-of-typeフィルターにより同じ要素の中で先頭／末尾の子要素を、また:only-of-typeフィルターにより同列の子要素に同種の要素が1つしかないものを、さらに:nth-of-type／nth-last-of-typeフィルターにより同じ要素の中でn番目の要素を取得する方法を解説。
43. 【現在、表示中】≫ 指定された言語に対応する要素を取得するには？ ― :langフィルター
:langフィルターを使って、コンテンツの言語を指定するlang属性の値に応じて要素を取得する方法を説明する。
44. URLフラグメントに一致するid値を持つ要素を取得するには？ ― :targetフィルター
:targetフィルターを使って、URLフラグメントに一致するid属性値の要素を取得する方法を説明する。
45. ページのスクロール位置を設定／取得するには？（scrollTop／scrollLeft）
scrollTop／scrollLeftメソッドを使ってページスクロールの垂直位置／水平位置を設定もしくは取得するための基本的な方法を説明する。
