jquery - 如果最后一个元素有类

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>

我添加了具有自动释放功能的最后一个元素，但只有当最后一个 for 还不是空的时，我才想添加 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-clause” 这样做：

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
}