jQuery Traversing

jQuery Traversing Reference

遍歷 DOM Tree

Ancestors 祖先

向上遍歷 DOM Tree

parent()

此方法返回所選擇元素所對應之直接父元素

此方法之向上遍歷一級 DOM Tree

$(document).ready(function(){    $("span").parent();});$(document).ready(function(){    $("span").parent().css({"color": "red", "border": "2px solid red"});});

parents()

此方法返回所選擇元素對應之所有父元素

直到根元素 html

$(document).ready(function(){    $("span").parents();});$(document).ready(function(){    $("span").parents().css({"color": "red", "border": "2px solid red"});});$(document).ready(function(){    //返回所有父元素中對應之 ul    $("span").parents("ul");});

parentsUntil()

返回所選元素至該方法參數指定的元素之間的父元素

$(document).ready(function(){    $("span").parentsUntil("div");});$(document).ready(function(){    $("span").parentsUntil("div").css({"color": "red", "border": "2px solid red"});});

Descendants 後代

向下遍歷 DOM Tree

children()

此方法返回所選元素對應之直接子代元素

此方法之向下遍歷一級 DOM Tree

$(document).ready(function(){    $("div").children();});$(document).ready(function(){    $("div").children().css({"color": "red", "border": "2px solid red"});});

children() 此方法可傳入一個可選參數來過濾子元素

$(document).ready(function(){    $("div").children("p.first");});$(document).ready(function(){    $("div").children("p.first").css({"color": "red", "border": "2px solid red"});});

find()

此方法返回所選元素的後代元素，直至最終後代元素

$(document).ready(function(){    $("div").find("span");}); //返回後代元素中 span 元素$(document).ready(function(){    $("div").find("span").css({"color": "red", "border": "2px solid red"});});$(document).ready(function(){    $("div").find("*");}); //取得所有後代元素$(document).ready(function(){    $("div").find("*").css({"color": "red", "border": "2px solid red"});});

Siblings 相鄰元素

相鄰元素：擁有相同的上級父元素

siblings()

此方法返回所選擇元素對應的所有的相鄰元素

$(document).ready(function(){    $("h2").siblings();});$(document).ready(function(){    $("h2").siblings().css({"color": "red", "border": "2px solid red"});});

此方法支持傳入可選參數，以過濾對應之相鄰元素

$(document).ready(function(){    $("h2").siblings("p");}); //取得 h2 相鄰元素中的 p 元素$(document).ready(function(){    $("h2").siblings("p").css({"color": "red", "border": "2px solid red"});});

next()

此方法取得同所選擇元素相鄰的下一個元素

$(document).ready(function(){    $("h2").next();});$(document).ready(function(){    $("h2").next().css({"color": "red", "border": "2px solid red"});});

nextAll()

此方法取得同所選擇元素相鄰的所有元素

$(document).ready(function(){    $("h2").nextAll();});$(document).ready(function(){    $("h2").nextAll().css({"color": "red", "border": "2px solid red"});});

nextUntil()

此方法返回同所選擇元素相鄰，並且和給定參數之間的相鄰元素

$(document).ready(function(){    $("h2").nextUntil("h6");});$(document).ready(function(){    $("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});});

prev() prevAll() prevUntil()

同 next 之類的方法相似，不過選取方向相反，此些方法向上取得相鄰元素

Filtering

first()

取得所指定類型元素組中的第一個元素

$(document).ready(function(){    $("div").first();});$(document).ready(function(){    $("div").first().css("background-color", "yellow");});

last()

取得所指定類型元素組中的最後一個元素

$(document).ready(function(){    $("div").last();});$(document).ready(function(){    $("div").last().css("background-color", "yellow");});

eq()

取得所指定類型元素組中特定索引對應的元素 索引：0 起始

$(document).ready(function(){    $("p").eq(1);});$(document).ready(function(){    $("p").eq(1).css("background-color", "yellow");});

filter()

此方法取得匹配指定條件的元素組

$(document).ready(function(){    $("p").filter(".intro");});$(document).ready(function(){    $("p").filter(".intro").css("background-color", "yellow");});

not()

此方法取得不匹配指定條件的元素組，同 filter() 方法相反

$(document).ready(function(){    $("p").not(".intro");});$(document).ready(function(){    $("p").not(".intro").css("background-color", "yellow");});