javascript - 如何在使用find jQuery时计算交叉元素的数量

假设HTML结构为：

 <div class="history">
      <div id="10"></div>
      <div id="20"></div>
      <div id="30"></div>
      <div id="40"></div>
      <div id="50"></div>
 </div>

如果这是HTML结构，则在jquery中：

 $(".history").find("#40").show();

如果使用此方法，则jquery必须循环遍历子元素以使用#40查找ID。它必须跨越3个元素，即#10, #20, #30。如何返回元素数量必须循环查找特定的id。

最佳答案

您可以在index()的帮助下完成此操作，因为索引以0开头，因此索引将是先前元素的计数。

alert($('#40').index());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="history">
  <div id="10"></div>
  <div id="20"></div>
  <div id="30"></div>
  <div id="40"></div>
  <div id="50"></div>
</div>

要么

alert($('.history > div').index($('#40')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="history">
  <div id="10"></div>
  <div id="20"></div>
  <div id="30"></div>
  <div id="40"></div>
  <div id="50"></div>
</div>

要么

alert($('.history').children().index($('#40')));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="history">
  <div id="10"></div>
  <div id="20"></div>
  <div id="30"></div>
  <div id="40"></div>
  <div id="50"></div>
</div>