javascript - 如何在使用find jquery时计算它穿过的元素数量

Question

假设 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。

Answer 1

您可以在 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>