javascript - 使用 nth-child if 语句更改 JQuery .append 输出

Question

我使用 .append 列出了 6 篇文章(见下文)，并希望根据它们在输出中的迭代来更改它们使用的网格大小。我已将其设置为 var grid = 'x'。我希望根据文章属于 ul#news 的哪个子项来改变这一点。

使用下面的代码，每篇文章默认为 < li class="sm-12 m-3 cls">

我相信我正在做的事情的原则是正确的，但有些东西不起作用。有人可以帮忙吗？

非常感谢!

for (var i = 0; i < data.response.total; i++) {
    if ('ul#news li:nth-child(0)') {
        var grid = "sm-12";
    } else if ('ul#news li:nth-child(1)') {
        var grid = "sm-12 m-6";
    } else {
        var grid = "sm-12 m-3";
    };
    var thumbnail = data.response.results[i].blocks.main.bodyHtml;
    var title = data.response.results[i].webTitle;
    $('ul#news').append('<li class="' + grid + ' cls">' + thumbnail + '<h2>' + title + '</h2></li>');
};

电流输出

<ul id="events" >
  <li class="sm-12 m-3 cls"></li>
  <li class="sm-12 m-3 cls"></li>
  <li class="sm-12 m-3 cls"></li>
  <li class="sm-12 m-3 cls"></li>
  <li class="sm-12 m-3 cls"></li>
  <li class="sm-12 m-3 cls"></li>
</ul>

我希望达到的目标

<ul id="events" >
  <li class="sm-12 cls"></li>
  <li class="sm-12 m-6 cls"></li>
  <li class="sm-12 m-3 cls"></li>
  <li class="sm-12 m-3 cls"></li>
  <li class="sm-12 m-3 cls"></li>
  <li class="sm-12 m-3 cls"></li>
</ul>

Answer 1

您在 if 条件中的选择器缺少 jQuery 构造函数 $()，而且您似乎假设该元素已经在 ul> 中，但它还不存在，所以你需要计算它已经存在的内容。所以你的代码应该是这样的:

for (var i = 0; i < data.response.total; i++) {
  if ($('ul#news li').length == 0) { // currently empty, first element going to be inserted
    var grid = "sm-12";
  } else if ($('ul#news li').length == 1) { // second element going to be inserted
    var grid = "sm-12 m-6";
  } else {
    var grid = "sm-12 m-3";
  };
  var thumbnail = data.response.results[i].blocks.main.bodyHtml;
  var title = data.response.results[i].webTitle;
  $('ul#news').append('<li class="' + grid + ' cls">' + thumbnail + '<h2>' + title + '</h2></li>');
};