JQuery Traversing

跟JavaScript DOM類似，JQuery也可以讓我們根據element的相對關係來取得其他element。

• parent(), parents([selector]), parentsUnitil(selector): 找到direct parent, all parents, parents between。
• children([selector]), find(selector): 找到direct children, all descendants。
• siblings(), next(), nextAll(), nextUntil(), prev(), prevAll(), prevUntil()
• first(), last()
• eq(): first=eq(0)
• filter(selector)
• not(selector)

>>
<div id="jq4_d1"> <ol> <li>One</li> <li>Two <ul> <li>A</li> <li class="jq4_c1">B</li> <li>C</li> <li>D</li> <li>E <ol> <li>a</li> <li id="jq4_li1">b</li> <li class="jq4_c1">c</li> </ol> </li> <li>F</li> </ul> </li> <li>Three</li> <li class="jq4_c2">Four</li> <li>Five</li> </ol> </div> <input type="button" value="Hide&Show" id="jq4_b1a"></input> <button id="jq4_b1b">slideToggle</button> <button id="jq4_b1c">Animate</button> <button id="jq4_b1d">Border</button> <button id="jq4_b1e">fadeToggle</button> $(document).ready(function() { $(".jq4_c1").css({"color":"red"}); $("#jq4_li1").parents("ul").children().eq(0).css({"color":"blue"}); // parents() //Buttons $("#jq4_b1a").click(function(){ //find all children, hide&show $("#jq4_d1").children().toggle(); }); $(".jq4_c1").click(function(){ //find pre&next, css(background) $(".jq4_c1").prev().css({"background":"pink"}); $(".jq4_c1").next().css({"background":"lime"}); }) $("#jq4_b1b").click(function(){ //slideToggle $("#jq4_d1").find(".jq4_c1").parent().slideToggle(2000); }); $("#jq4_b1c").click(function(){ //animate $("#jq4_d1").animate({opacity:0.3, marginLeft:'500px'}, 2000) .animate({opacity:1, marginLeft:'0px'}, 2000); }); $("#jq4_b1d").click(function(){ //border $("#jq4_d1").find('li').not('ul').css({"border":"1px solid blue"}); $("#jq4_d1").find('ul').children().css({"border":"1px solid red"}); }); $("#jq4_b1e").click(function(){ //fadeToggle $("#jq4_d1").children().children().filter("li:even").fadeToggle(); }); }); slideToggle Animate Border fadeToggle