index.html

js 爺爺級元素 父級元素 元素 子級元素 孫子級元素 元素的兄弟元素

jquery遍歷元素

今天我們講一下jquery的遍歷，就是向上遍歷，兄弟間遍歷以下子級遍歷。

父級遍歷

$(function(){ $(“#brother_id”).parent().css(“border”,”2px solid red”); // 直接父級元素 // $(“#brother_id”).parents().css(“border”,”2px solid blue”); // 所有的父級元素 // $(“#brother_id”).parents(“.grandpa_class”).css(“border”,”2px solid grey”); // 父級元素中具有grandpa_class進行樣式設置 // $(“.son_class”).parentsUntil(“.grandpa_class”).css(“border”,”2px solid black”); // 父級元素中直到找到具有grandpa_class的之間的所有的父級進行添加樣式});

注：

大家把以上的挨個試一下看下運行的效果。

兄弟遍歷

index.html:

js 爺爺級元素 父級元素 元素的兄弟元素3 元素的兄弟元素2 元素 子級元素 孫子級元素 元素的兄弟元素 元素的兄弟元素1

index.js:

$(function(){ $(“#brother_id”).siblings().css(“border”,”2px solid black”); // 兄弟元素進行樣式設置 // $(“#brother_id”).next().css(“border”,”2px solid red”); // brother_id的下一個相鄰的兄弟元素進行樣式設置 // $(“#brother_id”).nextAll().css(“border”,”2px solid yellow”); // brother_id后面的所有的兄弟元素進行樣式設置});//nextUntil,// 向上找相鄰的元素，prev,prevAll,prevUntil

子級遍歷

$(function(){ $(“.parent_class”).children().css(“border”,”2px solid black”); // .parent_class的直接子元素進行樣式設置 // $(“.parent_class”).children(“.borther_class”).css(“border”,”2px solid red”); // .parent_class 的子級中具有.brother_class進行樣式設置 // $(“.parent_class”).find(“.son_class”).css(“border”,”2px solid grey”); // .parent_class的子級和孫子級中具有.son_class的元素進行樣式設置 // $(“.parent_class”).find(“*”).css(“border”,”2px solid yellow”); // .parent_class的所有的子級元素進行樣式設置});

以上的實例，大家要試一下看看效果，記起來也好記一些。