jQuery 检查元素是否存在于 DIV 中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8272257/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Check if element exists within DIV
提问by Dan
I want to, on click, move an element inside a div unless it's already inside it. I was thinking something like...
我想在点击时移动 div 内的元素，除非它已经在里面。我在想像...
Click tag > If element is in div do nothing > Else move element into div
单击标签 > 如果元素在 div 中什么都不做 > 否则将元素移动到 div
http://jsfiddle.net/establish/Xhhe8/
http://jsfiddle.net/establish/Xhhe8/
HTML
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
jQuery
$('.tag').on('click', function(event) {
if ($('#crate').has(this)) {
// do nothing
}
else {
$(this).appendTo('#crate');
}
});
It doesn't work. Also not sure how to represent 'do nothing', usually I just use a singular IF statement so no need to represent it. Can I do this to 'do nothing' and disable the click?
它不起作用。也不知道如何表示“什么都不做”，通常我只使用一个单一的 IF 语句，所以不需要表示它。我可以这样做来“什么都不做”并禁用点击吗？
$(this).off();
回答by jfriend00
Gaby's answer will work, but I'd prefer structuring it without the empty ifblock like this:
Gaby 的答案会起作用，但我更喜欢在没有if像这样的空块的情况下构建它：
$('.tag').on('click', function(event) {
var self = $(this);
if (self.closest('#crate').length == 0) {
self.appendTo('#crate');
}
});
回答by Gabriele Petrioli
This should do it..
这个应该可以。。
$('.tag').on('click', function(event) {
var self = $(this);
if (self.closest('#crate').length) {
// do nothing
}
else {
self.appendTo('#crate');
}
});
回答by Blender
You usually represent the opposite of an ifstatement with if not(i.e. replacing ==with !=):
您通常表示与if语句相反的语句if not（即替换==为!=）：
$('.tag').on('click', function(event) {
if ($(this).parent().get(0) != $('#crate').get(0)) {
$(this).appendTo('#crate');
}
});
Instead of checking whether the element exists in the parent, why not compare parents?
与其检查元素是否存在于父元素中，为什么不比较父元素？
回答by Alex
You can try this (I just adjusted a bit of your code):
你可以试试这个（我只是调整了你的一些代码）：
$('.tag').on('click', function(event) {
if ($('#crate').find(this).length) {
// do nothing
}
else {
$(this).appendTo('#crate');
}
});
回答by adeneo
Me to!
我也是！
Or this:
或这个：
$('.tag').click(function() {
if ( $(this).parent().attr('id') != "crate") {
$(this).appendTo('#crate')
}
});
回答by Fabio Kenji
I would do the following, based on Alex's answer:
根据亚历克斯的回答，我会执行以下操作：
$('.tag').on('click', function(event) {
if ($('#crate').find(this).length < 1) {
$(this).appendTo('#crate');
$(this).off('click')
}
});
I think the if clause makes more sense in this case; we're just checking if the crate element has 'this'.
我认为 if 子句在这种情况下更有意义；我们只是检查 crate 元素是否有“this”。
The semantics of "if ($('#crate').has(this))" is misleading because we're expecting a boolean value when it actually returns an empty array, which evaluates to true in Javascript. So even if "#crate" has the actual element or not, the if condition is always true.
"if ($('#crate').has(this))" 的语义具有误导性，因为当它实际返回一个空数组时，我们期望一个布尔值，在 Javascript 中它的计算结果为 true。因此，即使“#crate”具有实际元素，if 条件也始终为真。
