jquery 遍历

一、children() 方法 

children() 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

注意：jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的第一级子元素

同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

<div class="div">
      <ul class="level-1">
           <li class="item-1">1</li>
           <li class="item-2">2</li>
           <li class="item-3">3</li>
      </ul>
 </div>
 <div class="div">
      <ul class="level-2">
           <li class="item-1">1</li>
           <li class="item-2">2</li>
           <li class="item-3">3</li>
      </ul>
</div>

$(".div").children().css("border","1px solid green"); // 两个ul被选中
$('.div').children(':last').css('color', '#f00');// 匹配的ul中，最后一个

二、 find() 方法

这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）

.find()方法要注意的知识点：

• find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
• 与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。
• find只在后代中遍历，不包括自己。

　　　　  <div>
            <ul>
                <li class="abc">111</li>
                <li>222</li>
            </ul>
        </div>
        <div>
            <ul>
                <li>333</li>
                <li class="abc">444</li>
            </ul>
        </div>
        <script>
            $('body').click(function(){
                $("div").find($("div .abc")).css("color","#f00"); //find 是找符合条件的后代，不包含自己
            })
        </script>

三、parent()方法

查找对应元素的父元素

<div>
    <p class="a">111</p>
    <p>222</p>    
</div>
<div>
    <p>333</p>
    <p>444</p>
    <span class="a">555<span>    
</div>

$(".a").parent().css("border","1px solid #ccc"); //给匹配元素的父元素(一个或多个)都加上一个边框

$(".a").parent(:first).css("color","#f00");// 只给第一个父元素

四、parents()

其实也类似find与children的区别，parent只会查找一级，parents则会往上一直查到查找到祖先节点

　　　　　<div class="123">
            <p>
                <span>
                   <em></em>
                </span>
            </p>
        </div>
        <script>
            var par=$("em").parents("div"); //获取祖先元素中标签为div的集合（这里刚好是一个）
            alert(par.attr("class"));//输出class属性的值 123

　　　　　　　$("em").parents(); //返回一个集合
        </script>

类似：　　children()：向下找儿子
　　　　　parent()：向上找爸爸
　　　　　parents()：向上找祖宗
　　　　　find()：向下查找后代

五、closest()方法

如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法

closet() 与 parents()的区别

1. 起始位置不同：.closest开始于当前元素 .parents开始于父元素
2. 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
3. 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

六、next() 方法

快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法

        <div class="div">
            <ul class="level-1">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>  
        $(".item-1").next().css("border","3px dashed #f00"); // 每个.item-1 的下一个兄弟 ，

        $('.item-2').next(':first').css('border', '1px solid blue');//每个.item-1 的下一个兄弟 中 ，第一个

七、prev() 方法

快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法 ，与next() 用法类似 ，只不过next()是紧邻的下一个

八、siblings()

　　如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法

        <div class="456">
            <ul>
                <li>666</li>
                <li class="a">000</li>
                <li class="b">111</li>
            </ul>
            <ul>
                <li class="a">222</li>
                <li class="b">333</li>
                <li>444</li>
            </ul>
        </div>
        <script>    
            $(".a").siblings().css("color","#f00"); //.a 的兄弟集合，不包括它自己

　　　　　　　　　$('.item-2').siblings(':last').css('border', '2px solid blue'); //.a 的兄弟集合 中，最后一个 （只有444）

</script>            

九、add() 方法

<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>
$("li") 只是获取li 的合集
然后想把p也加到合集中去, 原html结构不变

$("li").add($("p")).css("color","#f00");//传递选择器

$('li').add(document.getElementsByTagName('p')[0]);//传递DOM

十、each() 方法

通过$()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作$("li").css('') 给所有的li设置style值，因为jQuery是一个合集对象，

所以css方法内部就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是each

each是一个for循环的包装迭代器
each通过回调的方式处理，并且会有2个固定的实参，索引与元素
each回调方法中的this指向当前迭代的dom元素

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

$("li").each(function(index, element) { //遍历每个li ，加颜色
     $(this).css('color','red')  
 })

$("li").each(function(index, element) { //遍历每个li, 如果索引下标对2求余为真，则变蓝 ， 任意整数对2求余都是1或0
     if (index % 2) {
          $(this).css('color','blue')
     }
})