使用jQuery循環遍歷列表

Question

我只是想知道您是否可以幫助我。 我有以下代碼：

<li class="active">
    <div class="holder">
          <img src="#" data-name="test1">
    </div>
</li>
<li>
    <div class="holder">
          <img src="#" data-name="test1">
    </div>
</li>
<li>
    <div class="holder">
          <img src="#" data-name="test2">
    </div>
</li>
<li>
    <div class="holder">
          <img src="#" data-name="test1">
    </div>
</li>

我想要一種方法，先查看當前列表項，再查看下一個，然后再查看下一個，直到找到名稱為Test 2的img。 我設法得到了當前元素。 而且我發現了如何獲得下一個元素。 但不是下一個依賴於其子元素的元素。

誰能幫忙嗎？

提前致謝！

編輯

嘿，謝謝你的回答。 目前只有一個問題，我可能之前應該說過。 請參見下面的代碼：

<li class="active">
    <div class="holder">
      <img src="#" data-name="test2">
    </div>
</li>
<li>
    <div class="holder">
      <img src="#" data-name="test2">
    </div>
</li>
<li>
    <div class="holder">
      <img src="#" data-name="test2">
    </div>
</li>
<li>
    <div class="holder">
      <img src="#" data-name="test2">
    </div>
</li>
<li>
    <div class="holder">
      <img src="#" data-name="test1">
    </div>
</li>
<li>
    <div class="holder">
      <img src="#" data-name="test2">
    </div>
</li>

可能有許多名為test2的圖像，但我只想獲取當前活動圖像之后的下一個圖像。 例如，它將跳過圖像test1

Answer 1

$('img[data-name="test2"]').closest('li').addClass('active');

使用jQuery，你會經常發現對手工編寫幾乎不需要for在這樣的情況下循環，當他們的選擇讓你遍歷DOM輕松很多了。

http://api.jquery.com/category/traversing/

Answer 2

您可以使用

$("li img[data-name=test2]").closest("li").addClass("active");

這將直接將類設置為元素，而無需循環它們。

參見小提琴示例

Answer 3

假設您目前在第二個LI上（由於以下代碼的緣故，這將是$（“ li：nth-​​child（1）”））。 要查找包含所需圖像的下一個同級LI標簽並添加一個活動類，如下所示（尚未對其進行測試）：

$("li:nth-child(1)").nextAll("li img[data-name]='test2']").addClass("active");

Answer 4

基於Alwad的回答和您的后續問題：

$("li img[data-name]='test2']").closest("li").addClass("active");

編輯：從頭開始，將Alwad標記為正確，他編輯了答案。 edit2：停止編輯您的帖子/評論，人們最終將我標記為向下。 :(我已經完成了此答案的編輯，可以追蹤您的問題編輯。:)