jQuery - 遍历

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法

函数	描述
.add()	将元素添加到匹配元素的集合中。
.andSelf()	把堆栈中之前的元素集添加到当前集合中。
.children()	获得匹配元素集合中每个元素的所有子元素。
.closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
.contents()	获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
.each()	对 jQuery 对象进行迭代，为每个匹配元素执行函数。
.end()	结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
.eq()	将匹配元素集合缩减为位于指定索引的新元素。
.filter()	将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find()	获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
.first()	将匹配元素集合缩减为集合中的第一个元素。
.has()	将匹配元素集合缩减为包含特定元素的后代的集合。
.is()	根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
.last()	将匹配元素集合缩减为集合中的最后一个元素。
.map()	把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
.next()	获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()	获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil()	获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.not()	从匹配元素集合中删除元素。
.offsetParent()	获得用于定位的第一个父元素。
.parent()	获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
.parents()	获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
.parentsUntil()	获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。
.prev()	获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
.prevAll()	获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.prevUntil()	获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
.siblings()	获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
.slice()	将匹配元素集合缩减为指定范围的子集。

获得兄弟元素的几种方法

// 获取某个li的前一个兄弟元素
$(this).prev("li").css("backgroundColor", "greenyellow");

// 获取某个li的前面的所有的兄弟元素
$(this).prevAll("li").css("backgroundColor", "red");

// 获取某个li的下一个兄弟元素
$(this).next("li").css("backgroundColor", "yellowgreen");
// 获取某个li的后面的所有的兄弟元素
$(this).nextAll("li").css("backgroundColor", "red");

// 获取当前的li的所有的兄弟元素
$(this).siblings("li").css("backgroundColor", "gray");




<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function () {
    
    //找到div下面的直接的子元素li添加点击事件
    $("div>ul").click(function () {
      // $("div>ul>li").hide(1000)

      $(this).show().siblings("ul").find("li").hide(500)
    })
  })
</script>

获得子元素的写法

$(this).children("ul").show(500)

遍历

jquery对象.each(function(index,element){})

index: 就是元素在集合中的索引
element: 就是集合中的每一个元素对象
$(this): 集合中的每一个元素对象
回调函数返回值
- true: 如果function返回为true，则结束本次循环，继续下次循环(continue)
- false: 如果function返回为false，则结束循环(break)

$("ul>li").click() 不用遍历每个li都能触发点击事件，这是为什么呢？
因为 隐式迭代 -- 内部帮助我们循环遍历做操作

<ul class="list">
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
 <li>5</li>
 <li>6</li>
</ul>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function () {
    $('.list li').each(function (index, ele) {
      if (index > 3) return false;
      $(this).html("现在是第"+ index+ "个&lt;li&gt;标签")
    })
  })
/*   
最后文档中显示
现在是第0个 < li > 标签
现在是第1个 < li > 标签
现在是第2个 < li > 标签
现在是第3个 < li > 标签
5
6 
*/
</script>

<ul class="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

<script src="https://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(function () {
    //参数1:索引,参数2:对象
    $("ul>li").each(function (index, element) {
      console.log(arguments[0], arguments[1])
      var opacity = (index + 1) / 10;
      $(element).css("opacity", opacity);
      //$(this).css("opacity", opacity);
    })
  })
</script>

⚠️注意: each方法就是用来遍历jQuery对象的,但是,里面的每个对象最开始都是DOM对象,如果想要使用jQuery的方法,需要把DOM对象转jQuery对象

$(element)
$(this)

for...of

jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象)