Question

我有以下HTML代码：

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

默认情况下，应隐藏所有class = more的div。我使用$（'div.More'）。hide（）

困难的是，当用户点击价值为'1'的收音机时，所有div都应该显示div.Radios的下一个兄弟姐妹（但只有中间兄弟姐妹，而不是所有div.More）。< / p>

到现在为止，我点击了一个元素的父元素，但是在下一个div.Radios之前我无法选择下一个div.More元素。

你能帮我一把吗？

最诚挚的问候。

何

Answer 1

但我无法选择下一个div.More元素，直到下一个div.Radios。

使用nextUntil()：

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

Answer 2

首先，您点击的无线电输入比您关注的父级“.Radios”低2级。

所以你希望能够在做其他任何事情之前得到那个父母，比如这样：

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

既然您拥有父级，您可以轻松获得.next（）和.prev（）兄弟元素：

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

Jquery特别选择

2 个答案: