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

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() 设置属性时, 任何 data-*属性将自动放入 .data()通过 jQuery。

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

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