第6章 jQuery遍历
王永杰
|
|
|
979
|
0
|
开发相关

4220 字
|
53 分钟
本文最后更新于 1794 天前，其中的信息可能已经有所发展或是发生改变。

1. jQuery遍历之children()方法

jQuery是一个合集对象，如果想快速查找合集里面的第一级子元素，此时可以用children()方法。这里需要注意：.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素（仅儿子辈，这里可以理解为就是父亲-儿子的关系）

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

代码如果是$("div").children()，那么意味着只能找到ul，因为div与ul是父子关系，li与div是祖辈关系，因此无法找到。

children()无参数

允许我们通过在DOM树中对这些元素的直接子元素进行搜索，并且构造一个新的匹配元素的jQuery对象

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

.children()方法选择性地接受同一类型选择器表达式

$("div").children(".selected")

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

具体的操作，请参考下边的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
    .left {
        width: auto;
        height: 120px;
    }
    
    .left div {
        width: 150px;
        height: 70px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    a {
        display: block;
    }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>children方法()</h2>
    <div class="left first-div">
        <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 class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button id="bt1">点击：children无参数</button>
    <button id="bt2">点击：children传递表达式</button>
    <script type="text/javascript">
    $("#bt1").click(function() {
        $(".div").children().css("border","3px solid red")
    })
    </script>

    <script type="text/javascript">
    $("#bt2").click(function() {
        //找到所有class=div的元素
        //找到其对应的子元素ul，然后筛选出最后一个，给边宽加上颜色
        $('.div').children(':last').css('border', '3px solid blue')
    })
    </script>
</body>
</html>

2. jQuery遍历之find()方法

jQuery是一个合集对象，如果想快速查找DOM树中的这些元素的后代元素，此时可以用find()方法，这也是开发使用频率很高的方法。这里要注意 children与find方法的区别，children是父子关系查找，find是后代关系（包含父子关系）

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

代码如果是$("div").find("li")，此时，li与div是祖辈关系，通过find方法就可以快速的查找到了。

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

  • find是遍历当前元素集合中每个元素的后代。只要符合，不管是儿子辈，孙子辈都可以。
  • 与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。
  • find只在后代中遍历，不包括自己。
  • 选择器 context 是由 .find() 方法实现的；因此，$('.item-ii').find('li') 等价于 $('li', '.item-ii')(找到类名为item-ii的标签下的li标签)。

注意重点：

.find()和.children()方法是相似的
1.children只查找第一级的子节点
2.find查找范围包括子节点的所有后代节点

具体的操作，请参考下边的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
    .left {
        width: auto;
        height: 200px;
    }
    
    .left div {
        width: 150px;
        height: 70px;
        padding: 5px;
        margin: 5px;
        float: left;
        background: #bbffaa;
        border: 1px solid #ccc;
    }
    
    span {
        color: blue;
    }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>find方法()</h2>
    <div class="left first-div">
        <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 test">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：find传递表达式</button>
    <br/>
    <br/>
    <h3>find表达式</h3>
    <div style="border:1px solid red;">
        <p>
            <span>测试1</span>
            <a>测试2</a>
        </p>
        <p>
            <span>慕课网1</span>
            <a>慕课网2</a>
        </p>
        <div>
            <span>Aaron1</span>
            <a>Aaron2</a>
        </div>
    </div>
    <br/>
    <br/>
    <button>点击：find传递$对象</button>
    <script type="text/javascript">
    $("button:first").click(function() {
        //?
        $(".left").find("li:last").css("border","1px solid red")
    })
    </script>
    <script type="text/javascript">
    $("button:last").click(function() {
        //找到所有p元素，然后筛选出子元素是span标签的节点
        //改变其字体颜色
        var $spans = $('span');
        $("p").find($spans).css('color', 'red');
    })
    </script>
</body>
</html>

3. jQuery遍历之parent()方法

jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的父元素（这里可以理解为就是父亲-儿子的关系），此时可以用parent()方法

因为是父元素，这个方法只会向上查找一级

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

查找ul的父元素div, $(ul).parent()，就是这样简单的表达

parent()无参数

parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象

注意：jQuery是一个合集对象，所以通过parent是匹配合集中每一个元素的父元素

parent()方法选择性地接受同一型选择器表达式

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

具体的操作，请参考下边的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
        .left {
            width: auto;
            height: 400px;
        }

        .left div {
            width: 350px;
            height: 150px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }

        span {
            color: blue;
        }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>parent方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-2">
                <!-- A -->
                <li class="item-a">A</li>
                <!-- B -->
                <li class="item-b">B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                    </ul>
                </li>
                <!-- C -->
                <li class="item-c">C</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <!-- A -->
                <li class="item-a">A</li>
                <!-- B -->
                <li class="item-b">B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                    </ul>
                </li>
                <!-- C -->
                <li class="item-c">C</li>
            </ul>
        </div>
    </div>
    <button>点击：parent无参数</button>
    <button>点击：paren传递选择器</button>
    <script type="text/javascript">
        $("button:first").click(function() {
            //?
            $("ul.level-3").parent().css("border", "1px solid red")
        })
    </script>
    <script type="text/javascript">
        $("button:last").click(function() {
            //找到所有class=item-a的父元素
            //然后给每个ul,然后筛选出最后一个，加上蓝色的边
            $('.item-a').parent(':last').css('border', '1px solid blue')
        })
    </script>
</body>
</html>

4. jQuery遍历之parents()方法

jQuery是一个合集对象，如果想快速查找合集里面的每一个元素的所有祖辈元素，此时可以用parents()方法

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

理解节点查找关系：

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

在li节点上找到祖 辈元素div， 这里可以用$("li").parents()方法

parents()无参数

parents()方法允许我们能够在DOM树中搜索到这些元素的祖先元素，从有序的向上匹配元素，并根据匹配的元素创建一个新的 jQuery 对象;

返回的元素秩序是从离他们最近的父级元素开始的

注意：jQuery是一个合集对象，所以通过parent是匹配合集中所有元素的祖辈元素

parents()方法选择性地接受同一型选择器表达式

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

注意事项：

1 .parents()和.parent()方法是相似的，但后者只是进行了一个单级的DOM树查找
2 $( "html" ).parent()方法返回一个包含document的集合，而$( "html" ).parents()返回一个空集合。

具体的操作，请参考下边的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left {
            width: auto;
            height: 350px;
        }

        .left div {
            width: 350px;
            height: 150px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }

        span {
            color: blue;
        }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>parents方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-2">
                <!-- A -->
                <li class="item-a">A</li>
                <!-- B -->
                <li class="item-b">B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                    </ul>
                </li>
                <!-- C -->
                <li class="item-c">C</li>
            </ul>
        </div>
        <div class="div">
            <ul class="level-2">
                <!-- A -->
                <li class="item-a">A</li>
                <!-- B -->
                <li class="item-b">B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                    </ul>
                </li>
                <!-- C -->
                <li class="item-c">C</li>
            </ul>
        </div>
    </div>
    <button>点击：parents无参数</button>
    <button>点击：parents传递选择器</button>
    <script type="text/javascript">
        $("button:first").click(function() {
            $(".item-b").parents().css("border", "1px solid red");
        })
    </script>
    <script type="text/javascript">
        $("button:last").click(function() {
            //找到当前元素的所有祖辈元素,筛选出class="first-div"的元素
            //并且附上一个边
            $('.item-b').parents('.first-div').css('border', '2px solid blue')
        })
    </script>
</body>
</html>

5. jQuery遍历之closest()方法

以选定的元素为中心，往内查找可以通过find、children方法。如果往上查找，也就是查找当前元素的父辈祖辈元素，jQuery提供了closest()方法，这个方法类似parents但是又有一些细微的区别，属于使用频率很高的方法

closest()方法接受一个匹配元素的选择器字符串

从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素

例如：在div元素中，往上查找所有的li元素，可以这样表达

$("div").closet("li')

注意：jQuery是一个合集对象，所以通过closest是匹配合集中每一个元素的祖先元素

closest()方法给定的jQuery集合或元素来过滤元素

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

注意事项：在使用的时候需要特别注意下

粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素，但是两者还是有区别的，否则就没有存在的意义了

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

具体使用可以参考下边代码区域：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
        .left {
            width: auto;
            height: 200px;
        }

        .left div {
            width: 350px;
            height: 150px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }

        span {
            color: blue;
        }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>closest方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul class="level-2">
                <li class="item-a">A</li>
                <li class="item-b">B
                    <ul class="level-3">
                        <li class="item-1">1</li>
                        <li class="item-2">2</li>
                        <li class="item-3">3</li>
                    </ul>
                </li>
                <li class="item-c">C</li>
            </ul>
        </div>
    </div>
    <button>点击：closest传递选择器 </button>
    <button>点击：closest传递一个元素对象</button>
    <script type="text/javascript">
        $("button:first").click(function() {
            //?
            $("li.item-1").closest("ul.level-2").css("border","1px solid red")
        })
    </script>
    <script type="text/javascript">
        $("button:last").click(function() {
            var itemB = $('.item-b')
            $('li.item-1')
                .closest(itemB)
                .css('border', '1px solid blue');
        })
    </script>
</body>
</html>

6. jQuery遍历之next()方法

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

理解节点查找关系：

如下class="item-1"元素就是红色部分，那蓝色的class="item-2"就是它的兄弟元素

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

next()无参数

允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。

注意：jQuery是一个合集对象，所以通过next匹配合集中每一个元素的下一个兄弟元素

next()方法选择性地接受同一类型选择器表达式

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

具体的操作，请参考下边的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
        .left {
            width: auto;
            height: 120px;
        }

        .left div {
            width: 150px;
            height: 70px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }

        a {
            display: block;
        }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>next方法()</h2>
    <div class="left first-div">
        <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 class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：next无参数</button>
    <button>点击：next传递表达式</button>
    <script type="text/javascript">
        $("button:first").click(function() {
            $("li.item-2").next().css("border","1px solid red")
        })
    </script>
    <script type="text/javascript">
        $("button:last").click(function() {
            //找到所有class=item-3的li
            //然后筛选出第一个li，加上蓝色的边
            $('.item-2').next(':first').css('border', '1px solid blue')
        })
    </script>
</body>
</html>

7. jQuery遍历之prev()方法

jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法

理解节点查找关系：

如下蓝色的class="item-2"的li元素，红色的节点就是它的prev兄弟节点

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

prev()无参数

取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合

注意：jQuery是一个合集对象，所以通过prev是匹配合集中每一个元素的上一个兄弟元素

prev()方法选择性地接受同一类型选择器表达式

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

具体的操作，请参考下边的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
        .left {
            width: auto;
            height: 150px;
        }

        .left div {
            width: 150px;
            height: 100px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }

        a {
            display: block;
        }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>prev方法()</h2>
    <div class="left first-div">
        <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 class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：prev无参数</button>
    <button>点击：prev传递选择器</button>
    <script type="text/javascript">
        $("button:first").click(function() {
            $("li.item-2").prev().css("border","1px solid red");
        })
    </script>
    <script type="text/javascript">
        $("button:last").click(function() {
            //找到所有class=item-2的li
            //然后筛选出最后一个，加上蓝色的边
            $('.item-3').prev(':last').css('border', '1px solid blue')
        })
    </script>
</body>
</html>

8. jQuery遍历之siblings()

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

理解节点查找关系：

如下蓝色的class="item-2"的li元素，红色的节点就是它的siblings兄弟节点

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

siblings()无参数

取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合

注意：jQuery是一个合集对象，所以通过siblings是匹配合集中每一个元素的同辈元素

siblings()方法选择性地接受同一类型选择器表达式

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

具体的操作，请参考下边的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <style>
        .left {
            width: auto;
            height: 150px;
        }

        .left div {
            width: 150px;
            height: 100px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }

        a {
            display: block;
        }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>siblings方法()</h2>
    <div class="left first-div">
        <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 class="div">
            <ul class="level-3">
                <li class="item-1">1</li>
                <li class="item-2">2</li>
                <li class="item-3">3</li>
            </ul>
        </div>
    </div>
    <button>点击：siblingsv无参数</button>
    <button>点击：siblings传递选择器</button>
    <script type="text/javascript">
        $("button:first").click(function() {
            $(".item-2").siblings("li").css("border","1px solid red")
        })
    </script>
    <script type="text/javascript">
        $("button:last").click(function() {
            //找到class=item-2的所有兄弟节点
            //然后筛选出最后一个，加上蓝色的边
            $('.item-2').siblings(':last').css('border', '2px solid blue')
        })
    </script>
</body>
</html>

9. jQuery遍历之add()方法

jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中

.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。

简单的看一个案例：

操作：选择所有的li元素，之后把p元素也加入到li的合集中

<ul>
    <li>list item 1</li>
    <li>list item 3</li>
</ul>
<p>新的p元素</p>

处理一：传递选择器

$('li').add('p')

处理二：传递dom元素

$('li').add(document.getElementsByTagName('p')\[0\])

还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了

 $('li').add('<p>新的p元素</p>').appendTo(目标位置)

具体的操作，请参考下边的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left {
            width: auto;
            height: 150px;
        }

        .left div {
            width: 150px;
            height: 120px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>add方法()</h2>
    <div class="left first-div">
        <div class="div">
            <ul>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
            </ul>
            <p>新的p元素</p>
        </div>
    </div>
    <div class="right"></div>
    <br/>
    <button>点击：add传递元素标签</button>
    <button>点击：add传递html结构</button>
    <script type="text/javascript">
        $("button:first").click(function() {
            //把p元素添加到li的合集中
            $('li').add('p').css('background', 'red')
        })
    </script>
    <script type="text/javascript">
        $("button:last").click(function() {
            //把html结构'<p>新的p元素</p>'
            //加入到li的合集中，为了能够在页面上显示
            //需要再重新appendTo到指定的节点处
            //值得注意：整个结构位置都改变了
            $('li').add('<p>新的p元素</p>').appendTo($('.right'))
        })
    </script>
</body>
</html>

10. jQuery遍历之each()

jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作$("li").css('') 给所有的li设置style值，因为jQuery是一个合集对象，所以css方法内部就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是each

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数

所以大体上了解3个重点：

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

看一个简单的案例

<ul>
    <li>慕课网</li>
    <li>Aaron</li>
</ul>

开始迭代li，循环2次

$("li").each(function(index, element) {
     index 索引 0,1
     element是对应的li节点 li,li
     this 指向的是li
})

这样可以在循环体会做一些逻辑操作了，如果需要提前退出，可以以通过返回 false以便在回调函数内中止循

具体的操作，请参考下边的代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        .left {
            width: auto;
            height: 150px;
        }

        .left div {
            width: 150px;
            height: 120px;
            padding: 5px;
            margin: 5px;
            float: left;
            background: #bbffaa;
            border: 1px solid #ccc;
        }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>each方法</h2>
    <div class="left first-div">
        <div class="div">
            <ul>
                <li>list item 1</li>
                <li>list item 2</li>
                <li>list item 3</li>
            </ul>
        </div>
        <div class="div">
            <ul>
                <li>list item 4</li>
                <li>list item 5</li>
                <li>list item 6</li>
            </ul>
        </div>
    </div>
    <br/>
    <button>点击：each方法遍历元素</button>
    <button>点击：each方法回调判断</button>
    <script type="text/javascript">
        $("button:first").click(function() {
            //遍历所有的li
            //修改每个li内的字体颜色
            $("li").each(function(index, element) {
                $(this).css('color', 'red')
            })
        })
    </script>
    <script type="text/javascript">
        $("button:last").click(function() {
            //遍历所有的li
            //修改偶数li内的字体颜色
            // index对2取余，当index为偶数的时候，index%2的表达式值为0，0==false，index为奇数的时候，index%2表达式不为零，即为true。总的说就是过滤掉偶数。
            $("li").each(function(index, element) {
                if (index % 2) {
                    $(this).css('color', 'blue')
                }
            })
        })
    </script>
</body>
</html>
标题：第6章 jQuery遍历
地址：https://xiaodongxier.com/92.html
作者：王永杰
jQueryjQueryDOM篇
暂无评论

发送评论 编辑评论 


				

			

						

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
						

					

				

				

					

						

							

								
							

							
							
													

					

				

			

			
			

				

					
				

			

				

											

							
							
						

																

							
							
						

																

							
							
						

										
					
											
						

	

		
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
（╯‵□′）╯︵┴─┴
￣﹃￣
(/ω＼)
∠( ᐛ 」∠)＿
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ｀)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ(￣∇￣o)
ヾ(´･ ･｀｡)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò｡)
Σ(っ °Д °;)っ
( ,,´･ω･)ﾉ"(´っω･｀｡)
╮(╯▽╰)╭
o(*////▽////*)q
＞﹏＜
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
	

	

		
颜文字
Emoji
小恐龙
花!
	


									

			

			
			
		

	






上一篇
下一篇 

                    

                    
			        推荐文章
		            

		            

							
css打印机样式

							
							

							
Prettier基本使用

							
							

							
剪藏网页文章到obsidian中

							
							

							
yarn报错因为在此系统中禁止执行脚本

							
							

							
关于monaco-editor编辑器

							
							

							
vue中使用$emit传递多个参数

							
							

							
浏览器本地存储的布尔值获取时为字符串问题

							
							

							
antd中table分页的时候列序号显示问题

							
							

							
Vue 添加动态路由懒加载组件报错

							
							

							
Vue之生命周期