Jquery special selection

Question

Hello,

I have the following html code:

<div class="Radios">
     <span class="radio">
          <input type="radio" value="1"> yes
          <input type="radio" value="0"> no
     </span>
</div>
<div class="More">hello</div>
<div class="More">hello</div>

<div class="Radios">
     <span class="radio">
          <input type="radio" value="1"> yes
          <input type="radio" value="0"> no
     </span>
</div>
<div class="More">hello</div>

<div class="Radios">
     <span class="radio">
          <input type="radio" value="1"> yes
          <input type="radio" value="0"> no
     </span>
</div>
<div class="More">hello</div>
<div class="More">hello</div>
<div class="More">hello</div>

By default all the divs with class=more should be hidden. I use $('div.More').hide()

The difficult thing is that when a user clicks in a radio with value '1' all the divs.More next siblings to div.Radios should be shown (but only the inmediate siblings, not all the divs.More).

Until now, i have the parent of an element clicked, but i cannot select the next div.More elements until the next div.Radios.

Could you give me a hand?

Best Regards.

Jose

Answer 1

but i cannot select the next div.More elements until the next div.Radios.

Use nextUntil():

$('input[type=radio][value=1]').click(function () {
    $(this).parents('.Radios').nextUntil('.Radios').show();
}

Answer 2

Well first off, the radio inputs that you click on are 2 levels down from the parent you care about, ".Radios".

So you want to be able to get that parent before you do anything else, something like this:

$("[type=radio]").click(function(){
   var realParent = $(this).parents(".Radios");
});

Now that you have the parent you can easily get the .next() and .prev() sibling element:

$("[type=radio]").click(function(){
   var realParent = $(this).parents(".Radios");
   realParent.next().show();
   realParent.prev().show();
});