dom对象数组与jQuery对象数组的遍历方式

html代码:

<body>
    <span class="name">11span>br>
    <span class="name">22span>br>
    <span class="name">33span>br>
    <span class="name">44span>br>
    <input type="button" id="in">
body>

(一)dom对象数组的遍历

      var s=document.getElementsByClassName("name");

     (1)第一种

          for(var i in s){
                        alert(s[i].innerText+"dom");}

     (2)第二种

          for(var i=0;i< s.length;i++){
                    alert(s[i].innerText+"dom");}

     (3)第三种   

          $.each(s,function(i,v){
                    alert(s[i].innerText);
                    alert(v.innerText);
                    alert(this.innerText);
                });

 (二)jQuery对象数组的遍历

        var span=$(".name");

         思路:不能使用像dom对象的s[i]这样中括号方式遍历,使用eq(i)与each()方法

      (1)第一种

          span.each(function(){
                    alert($(this).text()+"1");
                    alert(this.innerText+"2");
                });

      (2)第二种

          span.each(function(i){
                    alert(span.eq(i).text()+"1");
                    alert(this.innerText+"2");
                });

      (3)第三种

          span.each(function(i,v){
                    alert(v.innerText+"1");
                    alert(this.innerText+"2");
                });

      (4)第四种

          $.each(span,function(i){
                    alert($(this).text()+"1");
                    //alert(span.eq(i).text());
                    alert(span.get(i).innerText);
                }

    总结(1):$.each(s,function(i,v){}); 既能遍历dom,又能遍历jQuery,其他的方式是各自独有的方式。但是

               $().each(s,function(i,v){}); 是jQuery对象独有的。

            (2):jQuery对象转换成dom对象。  span.get(i).innerText

            (3): $(this) 代表的是当前被操作的jQuery一个对象。this代表的是当前被操作的dom对象

你可能感兴趣的:(dom对象数组与jQuery对象数组的遍历方式)