javascript - 如果 data-attribut 等于 0，“parents().filter”返回未定义

Question

这很好用，除非 data-* 等于“0”，任何人都可以解释原因。

如果我直接访问该属性，它可以正常工作，例如 $("#Floor0").data("floor") 按预期返回 0。
但是，如果我使用过滤器功能来查找具有 data-floor 的父级，如果父级 data-floor="0"，它将不起作用。
如果我将 data-floor="0" 更改为 data-floor="00" 或任何其他值，它将起作用。

链接到 JSfiddle

console.log($("#Floor2").data("floor"));
console.log($("#Floor1").data("floor"));
console.log($("#Floor0").data("floor"));


Test('a2');
Test('a1');
Test('a0');


function Test(id){

  var FloorId = $("#"+id).parents().filter(function() {
    return $(this).data("floor");
  }).eq(0);
    console.log(FloorId.data("floor"));
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div data-floor="0" id="Floor0">
    <div>
      <label>0</label>
    </div>
    <div>
      <input type="checkbox" id="a0" />
    </div>
  </div>
  <div data-floor="1" id="Floor1">
    <div>
      <label>1</label>
    </div>
    <div>
      <input type="checkbox" id="a1" />
    </div>
  </div>
  <div data-floor="2" id="Floor2">
    <div>
      <label>2</label>
    </div>
    <div>
      <input type="checkbox" id="a2" />
    </div>
  </div>
</div>
<br>
<br>

标签： javascripthtmljquery

Answer 1

closest()与选择器一起使用parents()以避免在此处循环（它更快）：因此您可以使用具有相同选择器而不是最接近的选择器的父母，但父母将测试所有父母，当找到第一个父母时最接近的停止。

Test("a0");
Test("a1");
Test("a2");

function Test(id) {
  var FloorId = $("#" + id).closest("div[id^=Floor]");
  //parents too
  //var FloorId = $("#" + id).parents("div[id^=Floor]");
  console.log(FloorId.data("floor"));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div data-floor="0" id="Floor0">
    <div>
      <label>0</label>
    </div>
    <div>
      <input type="checkbox" id="a0" />
    </div>
  </div>
  <div data-floor="1" id="Floor1">
    <div>
      <label>1</label>
    </div>
    <div>
      <input type="checkbox" id="a1" />
    </div>
  </div>
  <div data-floor="2" id="Floor2">
    <div>
      <label>2</label>
    </div>
    <div>
      <input type="checkbox" id="a2" />
    </div>
  </div>
</div>
<br>
<br>