Jquery循环结果答案

【问题标题】：Jquery looping resultsJquery循环结果
【发布时间】：2011-07-06 17:54:39
【问题描述】：

我正在尝试循环所有匹配的结果，以便它们以列表形式显示。我尝试过使用 $('div#cmets').html(commentdata); - 但它只显示了第一个匹配的数据/第一个评论。

然后我尝试使用 .append 而不是 .html，这显示所有 cmets 正常 - 但每次我运行 onClick 事件时都会再次添加所有数据附加到请求中。

简而言之；如何列出我所有的 cmets，而不是每次单击加载它们的对象时都添加/附加它们。

var xml = data.responseXML;

var comments = xml.documentElement.getElementsByTagName("comment");

for (var i = 0; i < comments.length; i++) {

      var user = comments[i].getAttribute("username");
      var comm = comments[i].getAttribute("comment");
      var commentdata = "<li>"+ user +" - " + comm +"</li>";

      $('div#comments').append(commentdata);

}

【问题讨论】：

标签： jquery html loops append

【解决方案1】：

var xml = data.responseXML;

var comments = xml.documentElement.getElementsByTagName("comment");

// html collection
var commentdata = [];

// open <ul>
commentdata.push('<ul>');

// cache this
var len = comments.length;
for (var i = 0; i < len; i++) {

      var user = comments[i].getAttribute("username");
      var comm = comments[i].getAttribute("comment");

      // add <li> element
      commentdata.push("<li>"+ user +" - " + comm +"</li>");

}

// end <ul>
commentdata.push('</ul>');

// update <div id="comments"> contents
$('div#comments').html(commentdata.join("\n"));

Praveen 也是正确的，您可以在开始附加数据之前清空容器：

$('div#comments').empty();

【讨论】：

【解决方案2】：

    var xml = data.responseXML;

    var comments = xml.documentElement.getElementsByTagName("comment");

// clear previous data here
    $('div#comments').empty();

    for (var i = 0; i < comments.length; i++) {

          var user = comments[i].getAttribute("username");
          var comm = comments[i].getAttribute("comment");
          var commentdata = "<li>"+ user +" - " + comm +"</li>";

          $('div#comments').append(commentdata);

    }

【讨论】：

【解决方案3】：

您可能正在寻找.one() 事件附件方法。所以例如

$("#id-of-thing-to-click").one("click", function () {
    // the code from your post
});

点击事件只会在有人第一次点击#id-of-thing-to-click时触发，而不是每次都触发。

【讨论】：