Question

我有以下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
                  });

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

以下是jsfiddle link

Answer 1

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

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

请注意，这与相反的方式不同。在HTML或.attr()中设置属性时，jQuery会自动将data-*属性放入.data()。

DEMO： http://jsfiddle.net/zTsS4/2/

请注意，在演示中，该属性是在一个<li>的HTML中设置的，另一个是使用.data()设置的。然后.filter()找到两者。

通过jquery添加的数据属性不可用于选择元素

1 个答案: