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