jQuery選擇器是jQuery中的一大特色,它可以方便地將HTML元素選擇出來。通過jQuery選擇器選擇到元素后,我們可以通過后續的遍歷方法對元素進行進一步操作,本文將介紹jQuery選擇器后遍歷的常用方法。
//HTML代碼: <ul id="fruit-list"> <li class="apple">蘋果</li> <li class="banana">香蕉</li> <li class="orange">橘子</li> </ul> //JS代碼: //選擇器選中的元素是li元素 var $li = $('li'); //parent()方法返回選中元素的直接父元素 var $ul = $li.parent(); console.log($ul.attr('id')); //輸出結果為'fruit-list' //children()方法返回選中元素的所有子元素,不包括孫元素 var $allFruit = $ul.children(); console.log($allFruit.length); //輸出結果為3 //siblings()方法返回選中元素的兄弟元素,不包括自身 var $brothers = $li.siblings(); console.log($brothers.length); //輸出結果為2 //next()方法返回選中元素的下一個兄弟元素 var $nextBrother = $li.next(); console.log($nextBrother.html()); //輸出結果為'香蕉' //prev()方法返回選中元素的上一個兄弟元素 var $prevBrother = $li.prev(); console.log($prevBrother.html()); //輸出結果為'蘋果'
以上就是幾個常用的jQuery選擇器后遍歷方法,它們可以在我們操作DOM元素時幫助我們更加方便地操作。