/    Sign up×
Community /Pin to ProfileBookmark

.findNext() in jQuery? DOM traversal problem

Hi all,

I’m having a bit of trouble traversing the DOM. Any time a “Yes” answer is checked, the next “.yes” div should fade in. I will also being doing the same for the No’s, but can’t get this to work.

In this example, it works fine when you click on the first Yes. This is because the very next sibling matches the class. But it fails after that, because a “.no” is in the way.

So I’m looking for something that will find the next “.yes”, [I]disregarding[/I] elements between it and the target.

Using .eq() is too specific because the number of yes’s and no’s can change, and I’d prefer not to update a load of .eq()’s if possible every time I make a change.

[code]$(‘input:radio’).change(
function() {
if ($(this).is(‘:checked’) && $(this).val() == ‘yes’) {
$(this).closest(‘div’).next(‘.yes’).fadeIn();
}
});

<div>
Start
<br />Yes <input type=”radio” value=”yes” />
<br />No <input type=”radio” value=”no” />
</div>

<div class=”yes”>
yes 1
<br />Yes <input type=”radio” value=”yes” />
<br />No <input type=”radio” value=”no” />
</div>

<div class=”no”>
no 1
<br />Yes <input type=”radio” value=”yes” />
<br />No <input type=”radio” value=”no” />
</div>

<div class=”yes”>
yes 2
<br />Yes <input type=”radio” value=”yes” />
<br />No <input type=”radio” value=”no” />
</div>

<div class=”no”>
no 2
<br />Yes <input type=”radio” value=”yes” />
<br />No <input type=”radio” value=”no” />
</div>

<div class=”yes”>
yes 3
<br />Yes <input type=”radio” value=”yes” />
<br />No <input type=”radio” value=”no” />
</div>

<div class=”no”>
no 3
<br />Yes <input type=”radio” value=”yes” />
<br />No <input type=”radio” value=”no” />
</div>[/code]

So this should work out as: I click the first Yes and it displays the “yes 1” div, then I click the Yes inside that, and it displays the “yes 2” div, then I click the Yes inside that, and it displays the “yes 3” div.

My classes aren’t unique so .siblings() and .children() capture all of them, and naturally display all of them. So I think I need to somehow non-specifically target results in a match set? *brain melts*

Please help! thank you ?

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@rootDec 30.2014 — Please ask here:-> http://www.webdeveloper.com/forum/forumdisplay.php?51-JavaScript-Frameworks-(such-as-JScript)

This is a JavaScript forum, nothing to do with JQuery.
×

Success!

Help @W8_4me spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...