CODEWITHSUNDEEP
javascriptphpjqueryhtmlloops
KM123
KM123

Reputation: 1377

Loop over list using jquery

I was just wondering if you could help me please. I have the below code:

<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>

I would like a method of looking at the current list item and the to look at the next one and then the next one until it finds the img with the name Test 2. I have managed to get the current element. And I have found out how I can get the next element. But not the next element dependant on its children.

Could anyone please help?

Thanks in advance!

EDIT

Hey all thanks for all of your answers. There is only one problem at the moment and I should of probably said before. See the code below:

<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>

There could be many images named test2 but I only want to get the next image after the currently active image. For example it would skip the image test1

Upvotes: 1

Views: 76

Answers (4)

Smyrnian
Smyrnian

Reputation: 720

Say you were currently on the second LI (which would be $("li:nth-child(1)") for the sake of the code below). To find the next sibling LI tags containing the image you want and add an active class would be something like below (haven't tested it):

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

Upvotes: 0

Jason
Jason

Reputation: 3030

Based off of Alwad's answer and your follow up question:

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

edit: scratch mine, mark Alwad's as correct, he edited his answer. edit2: stop editing your post/comments, folks end up marking me downwards. :( I'm done editing this answer to chase your question edits. :)

Upvotes: -2

Barry
Barry

Reputation: 3723

You can use

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

This will set the class directly to the element without looping them.

See Fiddle Example

Upvotes: 1

user1017882
user1017882

Reputation: 

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

With jQuery, you'll often find little need for manually writing for loops in cases like these, when their selectors allow you to traverse the DOM a lot easier already.

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

Upvotes: 3

Related Questions