Sprawdź, czy element istnieje w DIV

Question

Chcę, po kliknięciu, przenieść element wewnątrz elementu div, chyba że jest już w nim. Myślałam coś takiego ...

click tag> Jeśli element znajduje się w div zrobić nic> Else elementu przenieść do div

http://jsfiddle.net/establish/Xhhe8/

HTML

<ul> 
    <li><a href="#" class="tag">Art</a></li> 
    <li><a href="#" class="tag">Computing</a></li> 
    <li><a href="#" class="tag">Design</a></li> 
</ul> 

<div id="crate"> 
</div> 

jQuery

$('.tag').on('click', function(event) { 

if ($('#crate').has(this)) { 
    // do nothing 
} 

else { 

    $(this).appendTo('#crate'); 
} 
}); 

To nie działa. Nie jestem również pewien, jak reprezentować "nie robić nic", zwykle używam pojedynczej instrukcji IF, więc nie ma potrzeby reprezentowania go. Czy mogę to zrobić, aby "nic nie robić" i wyłączyć kliknięcie?

$(this).off(); 

Answer 1

To powinno wystarczyć ..

$('.tag').on('click', function(event) { 

    var self = $(this); 
    if (self.closest('#crate').length) { 
     // do nothing 
    } 
    else { 
     self.appendTo('#crate'); 
    } 

}); 

Answer 2

Zwykle stanowią przeciwieństwo instrukcji if z if not (tj zastępując == z !=):

$('.tag').on('click', function(event) { 
    if ($(this).parent().get(0) != $('#crate').get(0)) { 
     $(this).appendTo('#crate'); 
    } 
}); 

Zamiast sprawdzania, czy element istnieje w rodzicu, dlaczego nie porównać rodziców?

Demo: http://jsfiddle.net/Xhhe8/3/

Answer 3

odpowiedź Gaby będzie działać, ale wolałbym strukturyzacji bez pustego if bloku jak ten:

$('.tag').on('click', function(event) { 
    var self = $(this); 
    if (self.closest('#crate').length == 0) { 
     self.appendTo('#crate'); 
    } 
}); 

Answer 4

można spróbować to (po prostu dostosować nieco kodu):

$('.tag').on('click', function(event) { 

    if ($('#crate').find(this).length) { 
     // do nothing 
    } 

    else { 

     $(this).appendTo('#crate'); 
    } 
}); 

Answer 5

Me to!

Albo to:

$('.tag').click(function() { 
    if ($(this).parent().attr('id') != "crate") { 
     $(this).appendTo('#crate') 
    } 
}); 

http://jsfiddle.net/establish/Xhhe8/

Answer 6

chciałbym wykonać następujące czynności, w oparciu o Alexa odpowiedź:

$('.tag').on('click', function(event) {  
    if ($('#crate').find(this).length < 1) { 
     $(this).appendTo('#crate'); 
     $(this).off('click') 
    } 
    }); 

myślę, że jeśli klauzula ma większy sens w tym przypadku; właśnie sprawdzamy, czy element skrzynki ma "to".

Semantyka słowa "if ($ ('# crate'). Ma (this))" wprowadza w błąd, ponieważ oczekujemy wartości boolowskiej, gdy faktycznie zwraca pustą tablicę, co w języku JavaScript jest prawdziwe. Więc nawet jeśli "#crate" ma rzeczywisty element, czy nie, warunek if jest zawsze prawdziwy.