0

我有以下html代码。

<ul>
    <li  data-details="li1">first</li>
    <li  >second</li>
</ul>

请注意，对于第一个元素，我添加data-details 了带有值的属性。对于第二个li元素，我使用 jquery 添加相同的元素。这是我的 JavaScript 代码。

$(document).ready(function()
                  {
                      $("ul li:nth-child(2)").data("details","li2");
                      console.log($("ul li:nth-child(2)").data()); //data can be verified using this
                      alert($("ul li[data-details=li1]").length); //resulting in alert 1
                      alert($("ul li[data-details=li2]").length); //resulting in alert 0
                  });

数据已添加，我们可以通过检查控制台来验证。但是我无法根据data-details jquery 添加的值来选择元素。为什么会这样？

这是jsfiddle链接

4

1 回答 1

2

设置项目.data() 不设置属性。如果您在 HTML 中设置属性或使用类似的.attr()内容，则可以使用属性选择器。如果您需要查找具有.data()集合的元素，则需要使用.filter()：

var el = $("selector").filter(function () {
    return typeof $(this).data("whatever") !== undefined;
});
console.log(el.length);

请注意，这与相反的行为不同。当您在 HTML 或 with 中设置属性时.attr()，任何data-*属性都会被 jQuery 自动放入.data()。

演示：http: //jsfiddle.net/zTsS4/2/

请注意，在演示中，属性在 HTML 中设置为 one <li>，而另一个设置为.data(). 然后.filter()发现两者。

于 2013-05-09T04:17:54.507 回答