Question

我想在点击时将一个元素移动到div中，除非它已经在里面。我在想像......

点击代码＆gt;如果元素在div中什么都不做＆gt;否则将元素移动到div

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

它不起作用。也不确定如何表示'什么都不做'，通常我只使用一个单一的IF语句，所以不需要代表它。我可以这样做“什么也不做”并禁用点击？

$(this).off();

Answer 1

应该这样做..

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

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

});

Answer 2

Gaby的回答是有效的，但我更喜欢在没有像这样的空if块的情况下构建它：

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

Answer 3

您通常使用if代表if not语句的反面（即将==替换为!=）：

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

而不是检查父元素中是否存在元素，为什么不比较父元素？

演示：http://jsfiddle.net/Xhhe8/3/

Answer 4

你可以尝试这个（我只是调整了一下你的代码）：

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

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

    else {

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

Answer 5

我来！

或者这个：

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

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

Answer 6

根据Alex的回答，我会做以下事情：

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

我认为if子句在这种情况下更有意义;我们只是检查crate元素是否有'this'。

“if（$（'＃crate'）。has（this））”的语义是误导性的，因为当它实际返回一个空数组时，我们期待一个布尔值，在Javascript中计算结果为true。因此，即使“#crate”具有实际元素，if条件也始终为真。

检查DIV中是否存在元素

6 个答案: