CODEWITHSUNDEEP
jquery
Jay
Jay

Reputation: 258

How to select the element I want using jQuery when there are hidden elements that are sometimes visible

I have a button that shows or hides a div that has a particular class on it using jQuery's slideToggle() function and it works fine, except when there's another div that was once hidden but is now visible in the mix.

I'm also using jQuery to select the div I'm after from inside my buttons' click event like so:

$(".MyButton").click(function () { var theDiv = $(this).next(".TheDivImAfter"); theDiv.slideToggle(); });

I understand that jQuery's next() function literally only looks at the next element and that when there's an element between here and there that was once hidden but is now visible, the next() functions sees that instead and selects nothing since the classes don't match. And that makes sense.

I tried nextUntil() too and that also selects nothing, which doesn't make sense to me. I've also tried find(), first() and siblings() with varying degrees of success and ended up wondering why there isn't a siblingsUntil() because .TheDivImAfter and .TheDivThatWasOnceHidden are siblings.

And I've been trying pseudo selectors like :not:

$(this).next(".TheDivImAfter:not(.TheDivThatWasOnceHidden)");

But it's still not working in those instances.

Is there any way to have it skip or ignore the class that's on the div that was once hidden?

I appreciate any help anyone can offer, I'm still wondering why nextUntil() doesn't work.

Thanks

Upvotes: 0

Views: 44

Answers (1)

Steve0
Steve0

Reputation: 2253

I think that you are after nextAll(). Here are the differences as per the jQuery API;

nextAll()

Description: Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.

nextUntil()

Description: Get all following siblings of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.

Traversal Functions

You can see that the primary difference is that nextUntil excludes the element matched by the selector provided. Both functions will take a filter to get to the exact div you are after.

$(".MyButton").click(function () {
    var theDiv = $(this).nextAll(".TheDivImAfter");
    theDiv.slideToggle();
});

Upvotes: 1

Related Questions