2022-03-29_jQuery遍历

0.前言

• 遍历、即查找元素的关联元素，如父辈、字辈元素等

1.父辈遍历

parent() 
parents()
parentsUntil()

$("span").parentsUntil("div"); //返回介于 <span> 与 <div> 元素之间的所有祖先元素

$("span").parents("ul").css({"color":"red","border":"2px solid red"});

$("span").parents("ul");//返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素

$("span").parent(); //所有span元素的直接父辈元素

注意如上的范例，返回的都是多个元素。因为所用到的选择器能选择到多个元素。

2.子辈遍历

children()
find()

$("div").children(); 返回每个 <div> 元素的所有直接子元素
$("div").children("p.1");返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素

$("div").find("span");返回属于 <div> 后代的所有 <span> 元素
$("div").find("*")返回 <div> 的所有后代

注意如上的范例，返回的都是多个元素。因为所用到的选择器能选择到多个元素。

3.同辈遍历

siblings()返回被选元素的所有同胞元素
next()返回被选元素的下一个同胞元素
nextAll()返回被选元素的所有跟随的同胞元素
$("h2").nextUntil("h6");返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
nextUntil()返回介于两个给定参数之间的所有跟随的同胞元素
prev()
prevAll()
prevUntil()

4.对所有元素进行逐一操作（each）

$("#recordInputForm input").each(function(){
  let amount = Number($(this).val() == "" ? 0 : $(this).val()););
});

5.对所有元素进行逐一操作（each）（不适用this）

• 为什么会有不使用this的情况，比如在vue的构造数据里面。
• 注意其中的function(index,ele)，ele为一个dom对象。所以如果要用jQuery提供的方法，需要使用$(ele)否则报错。
• 注意第四点的this也是一个dom对象。
• 注意index不能省略。

$(".userCheck").each(function (index,ele){
  console.log($(ele).attr("userName"));
});

6.参考文章

1.jQuery教程