jQuery遍历对象的方法

时间:2024-03-10 20:15:07

一、遍历元素

jquery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同的操作,就需要用到遍历

语法一:each方法

$("div").each(function(index,domEle){
//回调函数第一个参数(index)一定是索引号
//回调函数第二个参数(domEle)一定是dom元素
……
})

1、each()方法遍历匹配的每一个元素,主要用于DOM处理。each每一个

2、里面的回调函数有两个参数:index是每个元素的索引号,demEle是每个DOM元素对象

3、所以想要使用jquery方法,需要给这个dom元素转换成jquery对象$(domEle)

语法二:$.each()方法

$.each(object,function(index,element){
//object为需要被遍历的对象
//里面的函数有2个参数:index是每个元素的索引号;element遍历内容
……
})

1、$.each()方法可以用来遍历任何的对象。主要用于数据的处理,比如数组、对象

2、里面的函数有2个参数:index是每个元素的索引号;element遍历内容

二、举例

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>

1、求和

<script>
    //加法运算
    var sum = 0;
    $("div").each(function(index, domEle) {
        sum += parseInt($(domEle).text());
    })
    console.log(sum);   
</script>

 

 2、改变样式

<script>
    //更换样式
    var arr = [\'red\', \'green\', \'blue\']
    $("div").each(function(index, domEle) {
//需要把dom元素先转换为jquery对象才可以使用jQuery的方法 $(domEle).css(
"color", arr[index]); }) </script>

 

 3、遍历数组、

<script>
    //遍历数组
    var arr = [\'red\', \'green\', \'blue\']
    $.each(arr, function(index, ele) {
        console.log(index);
        console.log(ele);
    })
</script>

 

 4、遍历对象

<script>
    //遍历数组
    $.each({
        name: "andy",
        age: 18
    }, function(i, ele) {
        console.log(i);//输出对象包含的属性
        console.log(ele);//输出属性对应的属性值
    })
</script>