javascript - divemptyappendが機能しない場合

Question

内部にn個のdivを含めることができるが、空にすることもできるdivがあります。divが空の場合、アイテムがないときにロードされているか、ユーザーが閉じるをクリックしてアイテムを削除すると、「0個のアイテムを選択しました」などのメッセージが表示されます。

私のアイデアは、これを次のように試すことでした。

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

しかし、これは機能していませんか？私は何が間違っているのですか？

コード： http： //jsfiddle.net/Nj5vx/1/

score 3 · Accepted Answer

を実行すると、クラスが含まれる要素$('.container')が選択され、その要素を含むjQueryオブジェクトが返されます。そのプロパティにアクセスすると、それらの要素内の要素の数ではなく、一致した要素の数を取得します。<div>containerlength

代わりに必要なのは次のとおりです。

$('.container .item').length

itemこれにより、クラスを持つ要素内のクラスを持つ要素が選択されますcontainer。.container要素が空の場合（要素がない場合.item）、lengthプロパティはになります0。

score 2 · Accepted Answer

ソリューションの私のjsFiddleを確認してくださいhttp://jsfiddle.net/Nj5vx/4/

私がしたことは、アイテムを削除する関数を呼び出して、アイテムがいくつ存在するかを数えることです。ゼロの場合は、次のメッセージを表示します。

$(".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>');
        };    
    }); 
});

score 2 · Accepted Answer

これを試してください：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を隠しているので、目に見えるものを探してください...

score 1 · Accepted Answer

フェードアウトは非同期です
アイテムが削除されるたびにリストを更新する必要があります

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

score 0 · Accepted Answer

divコンテナの長さをチェックしています。いつも存在しますね。私が理解したように、あなたは中のアイテムの長さをチェックする必要があります。このような：

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

score 0 · Accepted Answer

この場合の長さは、返されたjQueryオブジェクトのプロパティを参照しています。より適切なフレーズ検索基準がないため、ページ上の要素の数があなたに一致したことがわかります。

I.E.
'.container .item'

この場合、コードはjQueryにDOMを検索するように指示しており、要素が見つからない場合は、その要素を追加しません。

javascript - divemptyappendが機能しない場合

6 に答える 6

Related

Reference