Question

我的网页上有许多具有lang属性的元素。如何仅选择具有lang属性的元素？

即

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

Answer 1

您需要使用attribute selector。

<强> Live Demo

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

您可以使用each()

遍历每个项目

$('[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 Fiddle demo

以上内容将设置所有元素，其lang属性等于english或french。当然，这是CSS，可以修改选择器以仅应用于具有这些属性的特定元素：

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

JS Fiddle demo

正如您所想象的那样，span样式lang属性等于english，div元素lang属性等于french。

使用:lang()伪类而不传递值 not ，遗憾的是，选择仅具有lang属性的元素。

但是，使用CSS属性选择器[lang]可以：

[lang] {
    color: #f90;
}

JS Fiddle demo

当然，选择器中缺少一个元素意味着通用选择器，以便准确地选择更多，修改选择器以应用于特定元素类型（{{ 3}}）或特定父元素（span[lang]）中的元素。

但是，出于其他目的，例如修改内容或元素节点本身，使用jQuery，您可以使用相同的选择器。

在下面的例子中，我将把元素的原始文本分配给jQuery的data对象（变量名为original-text）并替换元素的可见文本（作为传递一个方法的匿名函数，以避免必须使用each()遍历匹配的元素，尽管如果你愿意，你可以这样做），考虑到这一点，我将只发布选择器：

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

div.langContainer [lang]

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

JS Fiddle demo

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

JS Fiddle demo

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

JS Fiddle demo

顺便提一下，似乎来自JS Fiddle demo，定义元素类型（例如$('span[lang]')）是选择的最快方法（当然，如果你只是样式内容然后CSS会更快。）

使用each()与传递给方法的匿名函数的简短讨论。

使用此方法完全取决于您想要做什么，但如果您想要修改每个匹配元素的文本，则以下两种方法是等效的：

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

jsPerf comparison of the jQuery approaches;

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

JS Fiddle demo;

但是，运行时间之间没有显着差异。

Answer 4

试试这个

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

Answer 5

您可以通过HTML5 data- *属性执行此操作。像这样设置属性

``

要获取data-lang设置为“english”的所有元素，请使用：

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

如何查找具有特定属性的所有元素？

5 个答案: