javascript - 特定の属性を持つすべての要素を見つけるにはどうすればよいですか？

Question

langページに属性を持つ要素がいくつかあります。lang属性を持つ要素のみを選択するにはどうすればよいですか？

すなわち

<div lang="english">Test</div>
<span lang="english">is cool</span>
<span lang="anotherlanguage">is also good</span>

Answer 1

属性セレクターを使用する必要があります。

ライブデモ

var res = $('[lang=english]')

各アイテムを繰り返すことができますuseeach （）

$('[lang=english]').each(function () {
   alert($(this).text());
});

Answer 2

$('*[lang]').each(function () {
   //Your Code
}

Answer 3

あなたはすでにこの質問に対する（受け入れられた）答えを持っていますが、私は追加の答えを投稿して、質問された質問にもっと完全に答え、またそれらの他の答えへのコメントで私が提起したさまざまな問題をカバーすると思いました。

私の回答で説明する各アプローチは、次のHTMLマークアップに適用されます。

<div class="langContainer">
    <span lang="english">Some text in an English span</span>
    <span lang="french">Some text in an French span</span>
    <span lang="algerian">Some text in an Algerian span</span>
    <span lang="urdu">Some text in an Urdu span</span>
</div>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

<ol>
    <li>List item one</li>
    <li>List item two</li>
    <li>List item three</li>
    <li>List item four</li>
    <li>List item five</li>
    <li>List item six</li>
    <li>List item seven</li>
</ol>

<ul class="langContainer">
    <li><div lang="english">Some text in an English div</div></li>
    <li><div lang="french">Some text in an French div</div></li>
    <li><div lang="algerian">Some text in an Algerian div</div></li>
    <li><div lang="urdu">Some text in an Urdu div</div></li>
</ul>

属性を使用して要素のスタイルを設定する最も簡単な方法langは、CSSです。次に例を示します。

:lang(english),
:lang(french) {
    color: #f90;
}

JSフィドルデモ。

上記は、またはに等しい属性を持つすべての要素のスタイルを設定します。もちろん、これはCSSであるため、セレクターを変更して、これらの属性を持つ特定の要素にのみ適用することができます。langenglishfrench

span:lang(english),
div:lang(french) {
    color: #f90;
}

JSフィドルデモ。

これは、ご想像のとおり、属性がに等しいaと、属性がに等しい要素spanのスタイルを設定します。langenglishdivlangfrench

:lang()値を渡さずに疑似クラスを使用しても、残念ながら、単に属性を持つ要素は選択されません。lang

ただし、CSS属性セレクターを使用すると次のようになります[lang]。

[lang] {
    color: #f90;
}

JSフィドルデモ。

もちろん、そのセレクターに要素がないということは、ユニバーサルセレクターを意味するため、より正確span[lang]に選択するには、セレクターを変更して、特定の要素タイプ（ ）または特定の親要素（）内の要素に適用するのが賢明かもしれませんdiv.langContainer [lang]。

ただし、コンテンツや要素ノード自体の変更など、他の目的では、jQueryを使用して、たとえば同じセレクターを使用できます。

次の例では、要素の元のテキストをjQueryのdataオブジェクト（変数名はoriginal-text）に割り当て、要素の表示テキストを置き換えます（匿名関数をメソッドに渡すデモンストレーションとして、反復する必要がないようにします）。要素をと一致させeach()ますが、必要に応じてそれを行うことができます）、それを念頭に置いて、セレクターのみを投稿します：

// selecting elements with lang equal to 'english':
$(':lang(english)')

JSフィドルデモ。

// selecting all elements with the lang attribute:
$('[lang]')

JSフィドルデモ。

// specifying the element-type:
$('span[lang]')

JSフィドルデモ。

// specifying the element-type:
$('div.langContainer [lang]')

JSフィドルデモ。

ちなみに、jQueryアプローチのjsPerf比較から、要素タイプの定義（たとえば$('span[lang]')）が選択するための最速の手段であるように思われます（もちろん、コンテンツのスタイルを設定するだけの場合、CSSはまだ速い）。

each()メソッドに渡される匿名関数の使用と使用についての簡単な説明。

このアプローチの使用は、実行する内容に完全に依存しますが、たとえば、一致した各要素のテキストを変更する場合は、次の2つのアプローチは同等です。

$('span[lang]').each(function(i){
    $(this).text('matched element ' + i);
});

JSフィドルデモ;

$('span[lang]').text(function(i) { return 'matched element ' + i; });

JSフィドルデモ;

ただし、実行にかかる時間にも大きな違いはありません。

Answer 4

これは、HTML5data-*属性を介して行うことができます。このように属性を設定します

「

data-langが"english"に設定されているすべての要素をフェッチするには、次を使用します。

document.querySelectorAll('[data-lang="english"]');

Answer 5

これを試して

$('[lang="english"],[lang="anotherlanguage"]')