jQuery的next()、nextAll()、nextUntil()方法
生活随笔
收集整理的這篇文章主要介紹了
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的val()方法
- 下一篇： jQuery——siblings()方法