Question

这可能很简单，但我无法弄清楚。谢谢！ http://jsfiddle.net/8DGgg/1/

  var listP ={"PEOPLE": [
       {  "name": "Joe",  "age": "1"  },
       {  "name": "Jim",  "age": "2" },
       {  "name": "Jessica",  "age": "3" }
       ]};


 for(var j in listP.PEOPLE) { 
     $("#dir").append( "<div class=\"whoWrap\">" );
     $(".whoWrap").append( listP.PEOPLE[j].name + " " + j );
     $("#dir").append("</div>");
    }

期望的结果：

  <div id="dir">
      <div class="whoWrap">Joe 0</div>
      <div class="whoWrap">Jim 1</div>
      <div class="whoWrap">Jessica 2</div>
      </div>

实际结果：

      <div id="dir">
          <div class="whoWrap">Joe 0Jim 1Jessica 2</div>
          <div class="whoWrap">Jim 1Jessica 2</div>
          <div class="whoWrap">Jessica 2</div>
      </div>

Answer 1

你必须这样做：

for(var j in listP.PEOPLE) { 

 $("#dir").append( "<div class=\"whoWrap\">"+listP.PEOPLE[j].name + " " + j +"</div>" );

 $("#dir").append("</div>");

}

你不需要追加 whoWrap 只是追加到同一个 dir div中，就可以了。

UPDATED FIDDLE

Answer 2

这是因为.whoWrap选择器匹配先前迭代中已经附加的所有先前元素。要解决此问题，请使用.last()减少元素。

同样最好将#dir添加到选择器中，以便它只针对其中的元素。

 $("#dir > .whoWrap").last().append( listP.PEOPLE[j].name + " " + j );

整个事情会写得更好：

$.each(listP.PEOPLE, function(index){
    $("#dir").append(
        $('<div>')
            .addClass('whoWrap')
            .text(this.name + " " + index)
    );
});

<强> FIDDLE

使用DOM元素（或jQuery对象）比处理原始HTML更好。
对于in循环在循环数组时出现问题，请使用jQuery $.each或基本for循环。

Answer 3

$（＆＃34; .whoWrap＆＃34;）选择了所有类匹配的div。因此导致重复。修改您的代码如下。

在这里小提琴：http://jsfiddle.net/CodingDawg/8DGgg/2/

for (var j in listP.PEOPLE) {
   var div = "<div class='whoWrap'>" + listP.PEOPLE[j].name + " " + j + "</div>"
   $("#dir").append(div);

 }

Answer 4

试试这个：

   $(document).ready(function(){

   var listP ={"PEOPLE": [{  "name": "Joe",  "age": "1" },{  "name": "Jim",  "age": "2"  },{  "name": "Jessica",  "age": "3"}]};


      for(var j in listP.PEOPLE) { 
          var whoWrap=$('<div class=\"whoWrap\"></div>');

         whoWrap.append( listP.PEOPLE[j].name + " " + j );
         $("#dir").append(whoWrap);

    }


    });

希望它有所帮助。

Answer 5

是的，问题是您将内容附加到此类$（“。whoWrap”），因此它将匹配所有内容。

这是你的jsfiddle工作http://jsfiddle.net/mrodriguezr/8DGgg/4/

$(document).ready(function(){

   var listP ={"PEOPLE": [
           {  "name": "Joe",  "age": "1" },
           {  "name": "Jim",  "age": "2"  },
           {  "name": "Jessica",  "age": "3"}
           ]};

 for(var j in listP.PEOPLE) { 
      var $whoDiv = $('<div>', {'class' : 'whoWrap'}).append(listP.PEOPLE[j].name + " " + j );

      $("#dir").append($whoDiv);
      $("#dir").append($whoDiv);
    }
});

jQuery通过附加div循环遍历数组

5 个答案: