1

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

Improve this question
4
  • can you post the excepted result ? Commented Oct 31, 2014 at 10:52
  • Sure I would like to add the class "active" to the li of the image that has the name test 2 Commented Oct 31, 2014 at 10:53
  • so you want to get the next element only if it has the image with data-name=test2? Commented Oct 31, 2014 at 10:58
  • Yes that is correct :) Commented Oct 31, 2014 at 11:40

4 Answers 4

Reset to default
2 
$('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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Why the downvote? I don't mind downvotes at all, I like learning where I've went wrong, but I can only do that if there's an explanation.
0

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

Improve this answer

1 Comment

My first answer set the class to the image. This one selects the li containing the img.
0

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");
Improve this answer

Comments

-1

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. :)

Improve this answer

7 Comments

You're adding a class to the img, he wants it on the li.
He's constantly editing his posts. :-/ That's not what it said originally. :)
@DeeMac -- it's considered bad form to downvote someone else's answer that's the same as yours, in favor of your own. Pretty tacky. I'm looking at Barry's post that you downvoted.
Both mine and Barry's were downvoted in a question that the only other person here is you. Downvotes on SO posts aren't restricted to only those participating at all. This question has been viewed "36 times". Could've been anyone.
By the way, your question is still wrong, and I still haven't downvoted. Why are you calling .parent()? The parent is a div, which he doesn't want to add a class to. Your two lines of code do entirely different things. Sort your answer out, it's useless.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.