jQuery的next()、nextAll()、nextUntil()方法

.next()

作用：选择指定元素的同级的下一个元素

【例】代码功能，点击一个方块，使下一个方块的样式改变

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>
div {background: linear-gradient(to right, steelblue, cadetblue );width: 200px;height: 50px;line-height: 50px;text-align: center;color: #fff;margin-bottom: 5px;cursor: pointer;
}
.active {border-radius: 10px;background: linear-gradient(to right, teal, darkseagreen);
}</style>
</head>
<body><div>夕阳很美</div><div>美也没用</div><div>没用也美</div>
</body>
<script src="./jquery.js"></script>
<script>$('div').click(function () {$(this).next().addClass('active');})
</script>
</html>

【注】next()也可传参数，若指定元素的下一个元素具备next的过滤条件，则可选中该元素，否则不能选中

.nextAll()

作用：选中同级中所有下面的子元素节点

【例】全选的复选框，代码效果如下

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 350px;height: 80px;background: linear-gradient(to bottom, cadetblue, steelblue);color: #fff;text-align: center;}h1 {font-size: 20px;text-align: center;}.all {margin-right: 20px;}.submit {width: 50px;height: 20px;line-height: 20px;background-color:#eee;color: #424242;border: none;outline: none;border-radius: 5px;margin-left: 20px;cursor: pointer;}</style>
</head>
<body><div class="wrapper"><h1>你喜欢的水果</h1>全选<input type="checkbox" name="all" class="all">苹果<input type="checkbox" name="1">橘子<input type="checkbox" name="2">香蕉<input type="checkbox" name="3"><input type="submit" value="提交" class="submit"></div>
</body>
<script src="./jquery.js"></script>
<script>$('.all').click(function () {if ($('.all').prop('checked')) {    //判断该复选框是否被选中$(this).nextAll('input[type=checkbox]').prop('checked',true);   //若被选中则所有复选框都被选中} else {$(this).nextAll('input[type=checkbox]').prop('checked',false);  //反之则所有复选框未被选中}})
</script>
</html>

【注】需在nextAll中添加过滤条件，否则下面所有同级的元素都添加check属性。

.nextUntil()

作用：设指定元素为A，nextUntil方法的参数选中的是B，则该方法可选中从A到B之间的所有元素

【例】多个全选复选框

代码效果

代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.wrapper {width: 350px;height: 500px;background: linear-gradient(to bottom, cadetblue, steelblue);color: #fff;padding: 10px 5px 20px 5px;margin-bottom: 5px;}h1 {font-size: 22px;margin: 0;padding: 0;text-align: center;}h2 {font-size: 20px;text-align: center;text-align: center;padding: 0;margin: 10px;}h3 {font-size: 18px;text-align: left;}.all {margin-right: 20px;}.submit {width: 50px;height: 20px;line-height: 20px;background-color:#eee;color: #424242;border: none;outline: none;border-radius: 5px;margin-left: 20px;cursor: pointer;}</style>
</head>
<body><div class="wrapper"><h1>你的喜欢</h1>全选<input type="checkbox" name="" id=""><h2>你喜欢的食物</h2>全选<input type="checkbox" name="" id="" class="choseAll"><h3>你喜欢的水果</h3>全选<input type="checkbox" name="all" class="all">苹果<input type="checkbox" name="1">橘子<input type="checkbox" name="2">香蕉<input type="checkbox" name="3"><h3>你喜欢的饮料</h3>全选<input type="checkbox" name="all" class="all">奶茶<input type="checkbox" name="1">可乐<input type="checkbox" name="2">酸奶<input type="checkbox" name="3"><input type="submit" value="提交" class="submit"><h2>你喜欢的娱乐项目</h2>全选<input type="checkbox" name="" id="" class="choseAll"><h3>你喜欢的游戏</h3>全选<input type="checkbox" name="all" class="all">王者荣耀<input type="checkbox" name="1">和平精英<input type="checkbox" name="2">第五人格<input type="checkbox" name="3"><h3>你喜欢的软件</h3>全选<input type="checkbox" name="all" class="all">抖音<input type="checkbox" name="1">快手<input type="checkbox" name="2">头条<input type="checkbox" name="3"><input type="submit" value="提交" class="submit"></div>
</body>
<script src="./jquery.js"></script>
<script>$('.wrapper').find('input').eq(0).click(function () {if ($(this).prop('checked')) {$(this).nextAll('input[type=checkbox]').prop('checked',true);   } else {$(this).nextAll('input[type=checkbox]').prop('checked',false);  }})$('h2').next().click(function () {if ($(this).prop('checked')) {$(this).nextUntil('input[type=submit]').prop('checked',true);   } else {$(this).nextUntil('input[type=submit]').prop('checked',false);  }})$('h3').next().click(function () {if ($(this).prop('checked')) {$(this).nextUntil('h3', 'input[type=checkbox]').prop('checked',true);   } else {$(this).nextUntil('h3', 'input[type=checkbox]').prop('checked',false);  }})
</script>
</html>

【注】nextInput可传两个参数，第一个参数可确定选择区间，第二个参数可过滤区间内不需要选中的元素

jQuery的next()、nextAll()、nextUntil()方法相关推荐

jQuery学习（十二）—jQuery中对象的查找方法总结
jQuery学习(十二)-jQuery中对象的查找方法总结一.find方法作用:在元素1中查找元素2,类似于选择器中的后代选择器格式:元素1.find(元素2),元素2为CSS选择器或者jQue ...
jQuery siblings() 兄弟节点的方法
在DOM树中横向遍历在DOM树中有许多有用的jQuery方法可以横向遍历: siblings() next() nextAll() nextUntil() prev() prevAll() prev ...
Jquery Ajax调用aspx页面方法
原文:Jquery Ajax调用aspx页面方法在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通 ...
jQuery代码优化的9种方法
前面的话本文将详细介绍jQuery代码优化的9种方法用对选择器在jQuery中,可以用多种选择器,选择同一个网页元素.每种选择器的性能是不一样的,应该了解它们的性能差异 1.最快的选择器:id选 ...
使用jquery获取url以及jquery获取url参数的方法
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作1.jquery获取url很简单,代码如下1.window.location.href;其实只是用到了javascri ...
jquery 取对象数组下标_JQuery使用index方法获取Jquery对象数组下标的方法
本文实例讲述了JQuery使用index方法获取Jquery对象数组下标的方法.分享给大家供大家参考.具体实现方法如下: /p> "http://www.w3.org/TR/xhtml ...
单击触发jquery.autocomplete的两种方法
jquery.autocomplete的参数 minChars设置为0时,默认要双击才会触发jquery.autocomplete,如果想要单击触发的话,得进行一定的处理才行.下面讲下我知道的单击触发 ...
jquery.nicescroll完美滚动条使用方法
jquery.nicescroll完美滚动条使用方法(转) 配置参数 : 当调用"niceScroll"你可以传递一些参数来定制视觉方面: cursorcolor - 十六进制改变 ...
jquery和zepto的扩展方法extend
jquery和zepto的扩展方法extend 总结下jQuery(3.1.1)和zepto(1.1.6)到底是如何来开放接口,使之可以进行扩展,两者都会有类型判断,本文使用简单的类型判断,暂不考虑兼 ...

jQuery的next()、nextAll()、nextUntil()方法

.next()

.nextAll()

.nextUntil()

jQuery的next()、nextAll()、nextUntil()方法相关推荐

最新文章

热门文章