index.html

js 爺爺級(jí)元素 父級(jí)元素 元素 子級(jí)元素 孫子級(jí)元素 元素的兄弟元素

jquery遍歷元素

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

父級(jí)遍歷

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

注：

大家把以上的挨個(gè)試一下看下運(yùn)行的效果。

兄弟遍歷

index.html:

js 爺爺級(jí)元素 父級(jí)元素 元素的兄弟元素3 元素的兄弟元素2 元素 子級(jí)元素 孫子級(jí)元素 元素的兄弟元素 元素的兄弟元素1

index.js:

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

子級(jí)遍歷

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

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