Question

jQuery nextAll用于选择指定元素之后的所有元素。在这里，我尝试自定义nextAll。

我想将nextAll应用于该div之后到另一个div之间的所有文章。

-<div></div>
-<article>
-<article>

-<div></div>
-<article></article>
-<article></article>

-<div></div>
-<article></article>
-<article></article>

但是下面的代码会影响所有article元素。在这里，我也尝试了nextUntill，但发现它被用于分解同类元素。

$(document).on('change', '.fee_tm', function() {
    if(this.checked) {
      $(this).parents('div').nextAll('article').fadeIn('slow');
    }
    else{
      $(this).parents('div').nextAll('article').fadeOut('slow');
    }
});

div{
  float:left;
  width:100%;
}
article{
  display:none;
  width:100%;
}

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div>
      <input type='checkbox' class='fee_tm' />JAN
    </div>
    <article>
      one
    </article>
    <article>
      Two
    </article>
    <div>
      <input type='checkbox' class='fee_tm' />FEB
    </div>
    <article>
      one
    </article>
    <article>
      Two
    </article>
    <div>
      <input type='checkbox' class='fee_tm' />MAR
    </div>
    <article>
      one
    </article>
    <article>
      Two
    </article>
    </body>
</html>

Answer 1

问题：

您想在复选框后隐藏/显示所有可用的<article>
您要以相同的HTML结构应用
当前显示的是所有<article>，其旁边是被点击的那个。

请检查以下代码：

$(document).on('change', '.fee_tm', function () {
    if (this.checked) {
        $(this).parents('div').nextUntil('div').fadeIn('slow');
    }
    else {
        $(this).parents('div').nextUntil('div').fadeOut('slow');
    }
});

div {
    float: left;
    width: 100%;
}

article {
    display: none;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
    <input type='checkbox' class='fee_tm' />JAN
</div>
<article>
    one
</article>
<article>
    Two
</article>
<div>
    <input type='checkbox' class='fee_tm' />FEB
</div>
<article>
    one
</article>
<article>
    Two
</article>
<div>
    <input type='checkbox' class='fee_tm' />MAR
</div>
<article>
    one
</article>
<article>
    Two
</article>
<div>
    <!--top last checkbox click stop-->
</div>

注意：：您需要在最后一个<div>的末尾应用一个空白<article>，以防止隐藏/显示其余代码。

jQuery next所有直到

1 个答案: