"closest()" nie działa w innym stanie.

Question

Wprowadziłem prostą funkcję wyboru (dodaj zaznaczenie) div na pierwszym kliknięciu, a drugie kliknięcie zostanie usunięte, użyłem "najbliższego()" w innym stanie. Nie łapie.

Proszę o pomoc.

dla kodu click here

JS: =

var selected = $('.demo-select'); 
selected.click(function() { 
    $(this).toggleClass('selected'); 
    if ($('.demo-select').hasClass('selected')) { 
     //alert(1); 
     $(this).append('<p class="test">check</p>'); 
    } else { 
     //alert(2); 
     $('.demo-select').closest('.test').remove(); 
    } 
}); 

Answer 1

trzeba użyć find() jak szukasz potomek nie elementu elementu przodka (.closest() służy do znalezienia elementu przodka dopasowanie przekazany selektor).

$(this).find('.test').remove(); 

Demo: Fiddle

Answer 2

Zastosowanie find() do osiągnięcia tego celu. Ponieważ closest() będzie przechodzić przez przodków w drzewie DOM, a nie w jego potomkach.

$('.demo-select').find('.test').remove(); //OR simply $(this).find('.test').remove() 

Aktualizacja

Dla wielu elementów użyć $(this)

var selected = $('.demo-select'); 
selected.click(function() { 
    $(this).toggleClass('selected'); 
    if ($(this).hasClass('selected')) { //HERE $(this) 
     //alert(1); 
     $(this).append('<p class="test">check</p>'); 
    } else { 
     //alert(2); 
     $('this').find('.test').remove(); //HERE $(this) and find() 
    } 
}); 

Answer 3

closest będzie Ci najbliższy przodek. Należy użyć find uzyskać .test:

var selected = $('.demo-select'); 
selected.click(function() { 
    $(this).toggleClass('selected'); 

    if ($('.demo-select').hasClass('selected')) { 
     $(this).append('<p class="test">check</p>') 
    } else { 
     $(this).find('.test').remove(); 
     //^^^^^^^^^^^^^^^^^^^ 
    } 
}); 

Demo: https://jsfiddle.net/tusharj/16dsa65j/4/

find:

uzyskać potomków każdego elementu w bieżącym zestawem dopasowanych elementów, przefiltrowaną przez selektor, Obiekt jQuery lub element.

Docs: http://api.jquery.com/find/

EDIT

Dla wielu elementów:

Demo: http://jsfiddle.net/tusharj/16dsa65j/9/

Answer 4

trzeba find element zamiast robić najbliższy wybór dla elementu.

$('.demo-select').find('.test').remove(); 

Answer 5

Tu trzeba użyć find() zamiast closet()

find(): Get potomków każdego elementu w bieżącym zestawem dopasowanych elementów, przefiltrowanej przez selektor, obiektu jQuery lub elementu

closet(): Dla każdego elementu w zestawie, uzyskaj pierwszy element pasujący do selektora, testując sam element i przechodząc przez jego przodków w drzewie DOM.

var selected = $('.demo-select'); 
 
selected.click(function() { 
 
    $(this).toggleClass('selected'); 
 
    if ($('.demo-select').hasClass('selected')) { 
 
    //alert(1); 
 
    $(this).append('<p class="test">check</p>'); 
 
    } else { 
 
    //alert(2); 
 
    $(this).closest('.test').remove(); 
 
    } 
 
});

.demo-select { 
 
    border: 1px solid; 
 
    height: 200px; 
 
    width: 200px; 
 
} 
 
.test { 
 
    color: red 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="demo-select"></div> 
 
<div class="demo-select"></div> 
 
<div class="demo-select"></div>

Demo: http://jsfiddle.net/tharindukumara/3b4forzd/