Javascript 查找包含特定数据属性的元素

Finding an element that contains a certain data attribute

提问by punkish

I have a list like so

我有一个这样的清单

<ul id="a">
<li data-id="i1" data-pk-type="foo bar">sdfsf</li>
<li data-id="i2" data-pk-type="foo">sdfs</li>
<li data-id="i3" data-pk-type="bar baz">sfdsf</li>
<li data-id="i4" data-pk-type="qux foo">sfds</li>
<li data-id="i5" data-pk-type="baz">sdff</li>
</ul>

I want to find all the elements that contain a given data-pk-type. I am trying the following unsuccessful code because .data("pkType", "foo")actually sets the data attribute to foo;

我想找到包含给定data-pk-type. 我正在尝试以下不成功的代码，因为.data("pkType", "foo")实际上将数据属性设置为foo;

var $links = $("#a").find("li").data("pkType", "foo");

I could do something like

我可以做类似的事情

var $links = $("#a").find("li", "[data-pk-type='foo']");

however that wouldn't work as well… I want any element that might contain foo. Suggestions?

但是，这也行不通……我想要任何可能包含foo. 建议？

回答by dknaack

Description

描述

You should use jQuerys Attribute Contains Selector [name*="value"].

你应该使用 jQuerys Attribute Contains Selector [name*="value"]。

Attribute Contains Selector [name*="value"]: Selects elements that have the specified attribute with a value containing the a given substring

属性包含选择器 [name*="value"]：选择具有包含给定子字符串的值的指定属性的元素

Check out the sample and jSFiddle Demonstration

查看示例和jSFiddle 演示

Sample

样本

$links = $("li[data-pk-type*='foo']");
alert($links.length);

will give you a 3, so 3 elements was found.

会给你一个 3，所以找到了 3 个元素。

More Information

更多信息

• Attribute Contains Selector [name*="value"]
• jSFiddle Demonstration

• 属性包含选择器 [name*="value"]
• jSFiddle演示

回答by Dipu Raj

Try based on this documentation http://api.jquery.com/attribute-contains-word-selector/

尝试基于此文档 http://api.jquery.com/attribute-contains-word-selector/

It will be like

它会像

var $links = $('li[data-pk-type~="foo"]',$("#a"));

回答by lonesomeday

I've previously answered a very similar question: jQuery 1.4.4: How to find an element based on its data-attribute value?. (I fancy you may have seen it already, since I got an upvote on it this afternoon.)

我之前回答过一个非常相似的问题：jQuery 1.4.4: How to find an element based on its data-attribute value? . （我想你可能已经看过了，因为我今天下午对它投了赞成票。）

Basically, I think you're using the wrong tool here. data-attributes should be used for storing data that doesn't logically fit into the normal attributes. In this case, your data-idand data-pk-typelogically map to the normal idattribute and to the normal classattribute. This is especially true because you want to find one of a set of space-separated "types" – exactly the same implementation as classes.

基本上，我认为您在这里使用了错误的工具。data-属性应该用于存储逻辑上不适合正常属性的数据。在这种情况下，您的data-id和data-pk-type逻辑映射到普通id属性和普通class属性。尤其如此，因为您想找到一组以空格分隔的“类型”中的一个——与类完全相同的实现。

Using normal attributes will make your elements much easier and quicker to find.

使用普通属性将使您的元素更容易和更快地找到。

<ul id="a">
<li id="i1" class="pk-foo pk-bar">sdfsf</li>
<li id="i2" class="pk-foo">sdfs</li>
<li id="i3" class="pk-bar pk-baz">sfdsf</li>
<li id="i4" class="pk-qux pk-foo">sfds</li>
<li id="i5" class="pk-baz">sdff</li>
</ul>

Note that I have "namespaced" the classes with pk-. This may not be necessary depending on how variant and numerous they are.

请注意，我使用pk-. 这可能不是必需的，具体取决于它们的变体和数量。

You can then find the elements with a normal selector:

然后，您可以使用普通选择器查找元素：

$('li.pk-foo');

回答by Dau

use this $("#a").find("li[data-pk-type='foo']");

用这个 $("#a").find("li[data-pk-type='foo']");

for more info read about jquery selectors from here

有关从此处阅读有关 jquery 选择器的更多信息

回答by Luc Laverdure

In Short:

简而言之：

$("#a").find("li[data-pk-type='foo']");