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

最新推荐文章于 2023-03-25 17:06:32 发布

桃花扇J

最新推荐文章于 2023-03-25 17:06:32 发布

阅读量1.3k

点赞数 1

分类专栏： jQuery 文章标签： javascript jquery

本文链接：https://blog.csdn.net/weixin_44584442/article/details/104692628

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

.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可传两个参数，第一个参数可确定选择区间，第二个参数可过滤区间内不需要选中的元素

桃花扇J

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jQuery的next()、nextAll()、nextUntil()方法

.next()作用：选择指定元素的下一个元素【例】代码功能，点击一个方块，使下一个方块的样式改变<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-w...
复制链接

扫一扫