如果最後一個元素具有類

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

.eq() jquery的方法可以接受負指數。將此索引設置爲-1會給出最後一項：

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

Answer 2

嘗試使用: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 3

試試這個

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 4

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

這種方式，你將永遠有你的好格柵端部4個的空項。 也避免//do nothing部分不幫助代碼可讀性。

Answer 5

而是有一個「做什麼，如果從句」這樣做的：

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

簡明扼要，再加上它不會讓下一個開發人員或自己有「他是什麼意思由抓耳撓腮//沒做什麼」。

編輯

這是我和Christophs解決方案的混合。 這樣做的目的是將查詢引擎上的負載降至最低，以便您不必多次查詢DOM，而只需在一次調用中進行查詢。 這是一個很好的優化方案，但是在頭部後面有一個很好的做法。