如果div空追加不起作用

我有一個div，裏面可以包含n個div，但也可以是空的。如果div爲空，則可以在其中沒有項目時加載，或者當用戶通過單擊關閉刪除其中的項目時，應該會出現諸如「您已選擇0項目」之類的消息。如果div空追加不起作用

我的想法是用試試這個：

if ($('.container').length == 0) { 
    $(this).append('<p class="empty">You have selected 0 items</p>'); 
};

，但是這是不工作？我究竟做錯了什麼？

代碼：http://jsfiddle.net/Nj5vx/1/

來源

2013-02-12 user1901096

'.fadeOut（）'！='remove（）' – hjpotter92 2013-02-12 13:36:29

你認爲'this'是什麼？你認爲'.length'正在檢查什麼？你是否意識到如果不在點擊事件中？ – epascarello 2013-02-12 13:36:32

你試圖讓那些上課.container的div。這是1（根據你的小提琴）。所以。長度== 1也不是0，它的工作，改變你的邏輯 – 2013-02-12 13:37:45

淡出是異步
您需要更新列表中的每個時間點的項目被刪除

http://jsfiddle.net/charlesbourasseau/Nj5vx/3/

$(".close").click(function(){ 
    $(this).parents('.item').fadeOut(200, function() { 
     $(this).remove(); 
     update(); 
    }); 

}); 

var update = function() { 
    if ($('.container div').length == 0) { 
     $('.container').append('<p class="empty">You have selected 0 items</p>'); 
    }; 
};

來源

2013-02-12 13:38:32 Charles

這可能是這種情況，但更新功能是錯誤的。請參閱下面的答案。 – War10ck 2013-02-12 13:40:21

@ War10ck實際上它不是 - 他是選擇孩子雖然選擇'.item'會更好... – Christoph 2013-02-12 13:44:05

謝謝，真的很喜歡這個解決方案的所有項目，也可以一起從另一個按鈕時，我可以重用的更新清除變種。還添加了update（）;在加載時執行加載以獲得容器空載時的消息。 – user1901096 2013-02-12 14:36:04

當你這樣做$('.container')，即選擇與它的類container的<div>元素，並返回包含該元素的jQuery對象。當你訪問它的length屬性時，你會得到匹配的元素數量，而不是這些元素中元素的數量。

你想要什麼，而不是爲：

$('.container .item').length

這將選擇具有類item元素裏面的元素與container類。如果.container元素爲空（沒有.item元素），那麼length屬性將爲0。

來源

2013-02-12 13:36:28

@Christoph老實說，我沒有在小提琴在很多細節看，卻是似乎有其他問題吧，他會需要更正。 – 2013-02-12 13:43:10

安東尼你好，謝謝你的解釋，我明白現在出了問題。添加hide（）而不是fadeOut（）。 – user1901096 2013-02-12 14:40:35

您正在檢查div容器的長度。它總是存在的不是嗎？按照我的理解，你需要檢查裏面物品的長度。就像這樣：

if ($('.container .item').length == 0) { 
    $(this).append('<p class="empty">You have selected 0 items</p>'); 
};

來源

2013-02-12 13:37:17 ArVan

長度在這種情況下指的是返回的jQuery對象上的一個屬性。它告訴你在頁面上的元素數量相匹配的，因爲缺乏一個更好的詞搜索條件：

I.E. 
'.container .item'

在這種情況下，你的代碼告訴jQuery的搜索DOM，當你發現沒有元素，追加到沒有元素。

來源

2013-02-12 13:39:17 War10ck

檢查解決方案http://jsfiddle.net/Nj5vx/4/

我做了我的jsfiddle是調用一個函數來刪除項目再算上他們有多少存在，如果爲零，則顯示消息：

$(".close").click(function(){ 
    $(this).parents('.item').fadeOut(200, function(){ 
     $(this).remove(); 
     if ($('.container .item').length == 0) { 
      $('.container').append('<p class="empty">You have selected 0 items</p>'); 
     };  
    }); 
});

來源

2013-02-12 13:39:52 Skatox

嗨Skatox，謝謝你的回答。認爲這是你能寫的最短的。將去尋找類似的charles解決方案，但可以重用update（）;其他按鈕上的var也是如此。 – user1901096 2013-02-12 14:39:08

沒有問題，只是給予好評，如果你沒有;） – Skatox 2013-02-12 14:58:42

已經upvoted ;-) – user1901096 2013-02-12 15:45:42

試試這個： http://jsfiddle.net/5Yftg/

$(".close").click(function() { 
    $(this).parents('.item').fadeOut(200, function() { 
     if ($('.container > .item :visible').length == 0) { 
      $('.container').append('<p class="empty">You have selected 0 items</p>'); 
     }; 
    }); 
});

既然你是隱藏的div，查找可見的...

來源

2013-02-12 13:43:53 Anujith

嗨A.V，謝謝您的回答。有趣的方法，但會與查爾斯的解決方案。 – user1901096 2013-02-12 14:37:23

如果div空追加不起作用

回答

相關問題