Jquery遍历元素

在讲这个之前，建议先看一下jquery的隐式迭代，这个就不多说了，隐式迭代的缺点在于它只能集体进行操作不能只针对某个元素进行操作，可以看下面的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <script>
        $(function() {
            $('div').css('color', 'pink')
        })
    </script>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

</html>

如果想要依次对遍历的元素进行操作需要用each方法，语法是：

$('div').each(function(index,domEle){})

1.each()方法遍历匹配每一个元素。

2.里面的回调函数有两个参数分别是index和domEle，index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象，所以如果要用jquery的方法必须把DOM对象转换为jquery对象。

注：DOM对象转换为jquery对象直接在前面加$()即可，如果是jquery对象转DOM对象有两种方法，第一是用$('element')[index]，第二种方法是$('element').get(index)。

看下面的代码可以实现jquery的遍历：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq遍历</title>
    <script src="../js/jquery.min.js"></script>
</head>

<body>
    <script>
        var color = ['pink', 'violet', 'yellow']
        var sum = 0;
        $(function() {
            $('div').each(function(index, element) {
                // 按照数组更改颜色
                // element是dom对象不是jq对象需要转换
                $(element).css('color', color[index])
                    // 然后计算里面的值加起来是多少
                sum += parseInt($(element).text())
            })
            console.log(sum);
        })
    </script>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

</html>

效果展示：

除此之外，jquery还有第二种遍历元素的方式为$.each(元素,function(index,value) {})

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq遍历</title>
    <script src="../js/jquery.min.js"></script>
</head>

<body>
    <script>
        var colors = ['pink', 'violet', 'yellow']
        $.each(colors, function(index, value) {
            console.log(index);
            console.log(value);
        })
    </script>
</body>

</html>

结果展示：

更多推荐

Jquery遍历元素