Результаты зацикливания Jquery

Question

Я пытаюсь зациклить все сопоставленные результаты, чтобы они отображались в виде списка. Я пытался использовать $ ('div # comments'). Html (commentdata); - но он показывает только первое совпадение данных / первый комментарий.

Затем я попытался использовать .append вместо .html , это показывает все комментарии в порядке - но добавляет все данные снова каждый раз, когда я запускаю событие onClick, которое прикреплено к запрос.

Короче говоря; как я могу перечислить все мои комментарии, без добавления / добавления их каждый раз, когда я нажимаю на объект, который их загружает.

---

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);

}

Answer 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"));

Правина также верна, вы можете просто очистить контейнер, прежде чем начать добавлять данные:

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

Answer 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);

    }

Answer 3

Возможно, вы ищете метод присоединения к событию .one(). Так, например,

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

Событие щелчка будет инициировано только при первом нажатии на #id-of-thing-to-click, а не каждый раз.