如何將類添加到 ul li

Question

嘿，我有這個 javascript 代碼

 $.ajax({ url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97' }).done(function(data) { console.log(data); var html = ""; $.each(data.results, function(index, item) { html += "<ul>"; html += "<li><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></li>"; html += "<li>" + item.description + "</li>"; html += "</ul>"; }); setTimeout(function() { $(".container").append(html); }, 1500); });

我需要一個類 (.list-group) 添加到輸出 ul 列表和 li 元素 (.list-group-item)

我試過了

 $("ul").addClass("list-group");
 $("li").addClass("list-group-item");

但它不工作

Answer 1

我認為最簡單的方法是在生成 HTML 字符串的地方添加。 像這樣：

$.ajax({
  url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97'
}).done(function(data) {
  console.log(data);

  var html = "";
  $.each(data.results, function(index, item) {
    html += "<ul class='list-group'>";
    html += "<li class='list-group-item'><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></li>";
    html += "<li class='list-group-item'>" + item.description + "</li>";
    html += "</ul>";
  });

  setTimeout(function() {
    $(".container").append(html);
  }, 1500);
});

或者，您可以在附加到 DOM 之后執行此操作，如下所示：

$(".container").append(html);
$(".container > ul").addClass('list-group');
$(".container > ul > li").addClass('list-group-item');

Answer 2

$.ajax({
  url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97'
}).done(function(data) {
  console.log(data);

  var html = "";
  $.each(data.results, function(index, item) {
    html += '<ul class="list-group">';
    html += '<li class="list-group-item"><a href="' + item['headline'] + '">' + item['headline/_text'] + "</a></li>";
    html += '<li class="list-group-item">' + item.description + "</li>";
    html += "</ul>";
  });



  setTimeout(function() {
    $(".container").append(html);
  }, 1500);
});

Answer 3

您可以在將其附加到容器后立即執行

$.ajax({
  url: 'https://api.import.io/store/connector/b5caf0ef-1e6b-4fba-9fa4-21e475196673/_query?input=webpage/url:http%3A%2F%2Fnuzzel.com%2FWAStatzz%3Fsort%3Dfriends%26when%3D2&&_apikey=e4fb993c758a43dda0ca9135d3b3264deebed4b302b0d342e2b3fabb2b49afc9c14493d0d53d65d0ea2a0fd19b45f6d10cda5252f76410921188d38cb4e6db8fc28527d64207329b2c86bdc5119bac97'
}).done(function(data) {
  console.log(data);

  var html = "";
  $.each(data.results, function(index, item) {
    html += "<ul>";
    html += "<li><a href='" + item['headline'] + "'>" + item['headline/_text'] + "</a></li>";
    html += "<li>" + item.description + "</li>";
    html += "</ul>";
  });
  $(".container").append(html);
  $("ul").addClass("list-group");
  $("li").addClass("list-group-item");
});

我認為這里不需要setTimeout 。

或者，如果您出於某種原因更喜歡 setTimeout，則將addClass保留在setTimeout

  setTimeout(function() {
      $(".container").append(html);
      $("ul").addClass("list-group"); //or $(".container ul")
      $("li").addClass("list-group-item");// or $(".container ul li")
  }, 1500);

但是在這兩種情況下，都需要在ul和li成為您的 DOM 的一部分后執行 addClass。

Answer 4

將 targetContainer 保存在一個變量中，然后使用find方法獲取 li 和 ul，如下所示：

targetContainer = $(".container");

setTimeout(function() {
        targetContainer.append(html);

        targetContainer.find('ul').addClass('list-group');
        targetContainer.find('ul li').addClass('list-group-item');
      }, 1500);

工作代碼筆： http ://codepen.io/gpincheiraa/pen/YqQjwe?editors=0010

Answer 5

我敢打賭，您的問題與您的超時有關。 可能您嘗試獲取尚未初始化的 DOM 元素。 我建議您在 setTimeout 函數中使用代碼：

setTimeout(function() {
    $(".container").append(html);
    $("ul").addClass("list-group");
    $("li").addClass("list-group-item");
}, 1500);

這樣您就已經初始化了 DOM，並且 $("ul") 和 $("li") 將找到要添加類的元素。