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的所有的子级元素进行样式设置});

以上的实例，大家要试一下看看效果，记起来也好记一些。