1

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

IE

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

5 回答 5

4

您需要使用属性选择器。

现场演示

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

您可以使用each()遍历每个项目

$('[lang=english]').each(function () {
   alert($(this).text());
});
于 2013-01-24T10:05:00.370 回答
1

虽然您已经对这个问题有一个（接受的）答案，但我想我会发布一个额外的答案，以更完整地回答所提出的问题，同时涵盖我在对其他答案的评论中提出的各种问题。

我在回答中讨论的每种方法都将应用于以下 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 小提琴演示。

以上将设置属性等于or的所有元素。当然，这是 CSS，可以修改选择器以仅应用于具有这些属性的特定元素：langenglishfrench

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

JS 小提琴演示。

正如您所想象的那样，这设置了一个属性等于的样式span和一个属性lang等于english的div元素。langfrench

不幸的是，在不传递值的情况下使用: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]')

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

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

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

JS 小提琴演示；

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

JS 小提琴演示；

但是，两者运行所需的时间也没有显着差异。

于 2013-01-24T18:41:17.313 回答
1 
$('*[lang]').each(function () {
   //Your Code
}
于 2013-01-24T10:06:02.913 回答
0

尝试这个 

$('[lang="english"],[lang="anotherlanguage"]')
于 2013-01-24T10:08:18.210 回答
0

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

``

要获取数据语言设置为“英语”的所有元素，请使用：

document.querySelectorAll('[data-lang="english"]');
于 2013-01-24T10:14:22.130 回答