Question

我有一个像这样的列表

<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>

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

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

我可以做类似

的事情

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

然而，这不会有效...我想要任何可能包含foo的元素。建议？

Answer 1

描述

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

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

查看示例和jSFiddle Demonstration

示例

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

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

更多信息

Answer 2

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

就像

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

Answer 3

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

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

使用普通属性可以使您的元素更容易，更快速地找到。

<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>

请注意，我已使用pk-“命名”了这些类。这可能不是必要的，取决于它们的变体和数量。

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

$('li.pk-foo');

Answer 4

简而言之：

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

Answer 5

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

有关更多信息，请阅读here

中的jquery选择器

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

5 个答案:

描述

示例

更多信息