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

Question

我在清单6中使用.append(参见下面的文章)，并希望根据输出中的迭代来更改它们使用的网格大小。我将其设置为var grid = 'x‘。我希望根据文章是ul#news的哪个子类来改变这一点。

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

我相信我所做的一切都是正确的，但是有些事情是行不通的。有人能帮忙吗？

非常感谢！

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