jQuery 遍历

    遍历最常用的方法就是each() 方法规定为每个匹配元素规定运行的函数。
    语法：
    $(selector).each(function(index,element))

代码展示：

$(function(){
    $("li").each(function(i,e){
        console.log("第"+i+"个元素是"+$(e).text());
    })
})

执行结果：

2.祖先
祖先是父、祖父或曾祖父等等。通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。

遍历祖先常用方法如下：

代码展示：

$(function(){
    console.log($("#mushroom").parent().prop('class'));

    $("#mushroom").parents().each(function(i,e){
        console.log(e);
    })

    $("#mushroom").parentsUntil('div').each(function(i,e){
        console.log(e);
    })
})

执行效果：

3.后代
后代是子、孙、曾孙等等。通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
常用的后代遍历方法如下：

代码展示：

$(function(){
    $(".vg").children().each(function(i,e){
        console.log($(e).text());
    })

    $("div").find("li").each(function(i,e){
        console.log(e);
    })
})

运行效果：

4.同胞
同胞拥有相同的父元素。通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。
常用的同胞元素遍历方法如下：

代码展示：

$(function(){
    $("#mushroom").siblings().each(function(i,e){
        console.log($(e).text());
    })
    console.log( "香菇后一个元素："+$("#mushroom").next().text());
    console.log( "香菇前一个元素："+$("#mushroom").prev().text());
    console.log("-------香菇之后-------");
    $("#mushroom").nextAll().each(function(i,e){
        console.log($(e).text());
    })
    console.log("-------香菇之前-------");
    $("#mushroom").prevAll().each(function(i,e){
        console.log($(e).text());
    })
})

运行效果：

本章总结：
学完本章内容应熟练掌握以下内容：
遍历常用操作：

常见效果：each、祖父、后代、同胞。