修改

Question

我想删除最后一个元素，如果它们有特定的类。例如：

<div class="grid">
   <div class="items"></div>
   <div class="items"></div>
   <div class="items"></div>
   <div class="items"></div>
   <div class="items empty<"></div>
   <div class="items empty"></div>
   <div class="items empty"></div>
   <div class="items empty"></div>
</div>

我添加了自动启动释放功能的最后一个元素，但是只有当最后一个元素不是空的时候我才想添加4个空项目。

所以我认为像这样的函数（但它不起作用）：

if (!($(".items").slice(-4).hasClass("empty")) ) { //do nothing }

else {
  $(".grid").append("<div class='items empty'></div>");
  $(".grid").append("<div class='items empty'></div>");
  $(".grid").append("<div class='items empty'></div>");
  $(".grid").append("<div class='items empty'></div>");
}

由于

Answer 1

而不是“不做任何if子句”这样做：

if(!$('.items:last').hasClass('empty')) {
   var div = "<div class='items empty'></div>";
   $(".grid").append(div)
             .append(div)
             .append(div)
             .append(div);
}

简洁明了，加上它不会让下一位开发人员或你自己也不知道“他的意思是什么//什么都不做”。

修改

这是我和Christophs解决方案的混合体。这样做是因为它最大限度地减少了您在查询引擎上的负载，因此您不必多次查询DOM，而是在一次调用中进行查询。这是一个很好的优化，但在头脑后面是一个很好的做法。

Answer 2

while( $('.item.empty').length < 4 ) {
    $('.grid').append('<div class="items empty"></div>');
}

这样，您的网格末尾总会有4个空项目。还要避免//do nothing部分无法提高代码可读性。

Answer 3

尝试使用:last选择器：

if ($(".items:last").hasClass("empty") ){ 
    //do nothing 
} else {
  $(".grid").append("<div class='items empty'></div>");
  $(".grid").append("<div class='items empty'></div>");
  $(".grid").append("<div class='items empty'></div>");
  $(".grid").append("<div class='items empty'></div>");
}

它适用于每个元素，不仅适用于4。

Answer 4

试试这个

if( $(".items:last").hasClass('empty') )
{
  //do nothing
}
else
{
  $(".grid").append("<div class='items empty'></div>("<div class='items empty'></div>("<div class='items empty'></div>("<div class='items empty'></div>");
}

Answer 5

.eq() jquery的方法可以接受负面索引。将此索引设置为-1将为您提供最后一项：

if($('.items').eq(-1).is(':not(.empty)')){ 
   //add for new emty div to gride
}

如果最后一个元素有类

5 个答案:

修改