代码之家 › 专栏 › 技术社区 › Dipak

jquery nextall和until

jquery

Dipak · 技术社区 · 6 年前

滑动分页 nextAll 用于选择指定元素之后的所有元素。我正在尝试自定义 NeXALL .

我想申请 NeXALL 对于在这个分区之后和另一个分区之前的所有项目。

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

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

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

1 回复 | 直到 6 年前

saAction 6 年前

问题:

您想隐藏/显示所有可用的 <article> 复选框后
您想在相同的HTML结构中应用它
当前正在显示全部 <文章& GT; 在单击的旁边。

请检查以下代码:

$(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> 在最后一个结尾 <文章& GT; 以防止隐藏/显示其余代码。

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

1 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前