如何找到如果div与特定的id存在于jQuery?

我得到了一个函数，它在单击时将<div>追加到元素。该函数获取被点击元素的文本，并将其赋值给一个名为name的变量。然后将该变量用作附加元素的<div> id。

我需要看看在附加元素之前是否已经存在<div> id和name，但我不知道如何找到这个。

这是我的代码:

$("li.friend").live('click', function() {
name = $(this).text();


// if-statement checking for existence of <div> should go here
// If <div> does not exist, then append element
$("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");


// Else
alert('this record already exists');
});

这看起来很简单，但我得到了错误“在搜索类名时出现意外的文件结束”。我完全不知道那是什么意思。

if (document.getElementById(name)) {
$("div#" + name).css({bottom: '30px'});
} else {
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}

更重要的是，我希望能够删除这个元素，如果我关闭它，这应该从文档中删除div id [name]，但.remove()没有这样做。

下面是它的代码:

$(".mini-close").live('click', function(){
$(this).parent().remove();
});

我将.mini-close作为.labels的子函数添加到append函数中，因此有一种方法可以在需要时关闭附加的<div>。在单击.mini-close并试图从li.friends再次单击相同的名称后，它仍然找到div id [name]并返回我的if语句的第一部分。

582187 次浏览
小开
最佳答案

你可以在选择器后面使用.length来查看它是否匹配任何元素，如下所示:

if($("#" + name).length == 0) {
//it doesn't exist
}

完整版:

$("li.friend").live('click', function(){
name = $(this).text();
if($("#" + name).length == 0) {
$("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");
} else {
alert('this record already exists');
}
});

或者，这个部分的非jquery版本(因为它是一个ID):

$("li.friend").live('click', function(){
name = $(this).text();
if(document.getElementById(name) == null) {
$("div#chatbar").append("<div class='labels'><div id='" + name + "' style='display:none;'></div>" + name + "</div>");
} else {
alert('this record already exists');
}
});
小开

尼克的回答很准确。你也可以直接使用getElementById的返回值作为你的条件，而不是将其与null进行比较(两种方式都可以，但我个人认为这种风格更有可读性):

if (document.getElementById(name)) {
alert('this record already exists');
} else {
// do stuff
}
小开

尝试检查选择器的长度，如果它返回一些东西，那么元素一定存在，否则不存在。

if( $('#selector').length )         // use this if you are using id to check
{
// it exists
}




if( $('.selector').length )         // use this if you are using class to check
{
// it exists
}

第一个if条件用于id，第二个if条件用于class。

小开

你可以使用jquery来检查，就像这样:

if($('#divId').length!==0){
Your Code Here
}
小开 
if($("#id").length) /*exists*/


if(!$("#id").length) /*doesn't exist*/
小开

把你想检查的id放在jquery的is方法中。

var idcheck = $("selector").is("#id");


if(idcheck){ // if the selector contains particular id


// your code if particular Id is there


}
else{
// your code if particular Id is NOT there
}
小开 
if ( $( "#myDiv" ).length ) {
// if ( "#myDiv" ) is exist this will perform
$( "#myDiv" ).show();


}

另一种简写方式:

    $( "#myDiv" ).length && $( "#myDiv" ).show();
小开

你可以用不同的方式来处理，

客观的是检查div是否存在，然后执行代码。简单。

条件:

$('#myDiv').length

注意:

#myDiv -> < div id='myDiv' > <br>
.myDiv -> < div class='myDiv' >

这将在每次执行时返回一个数字，因此如果没有div，它将给出一个0[0]，并且我们没有0可以在二进制中表示为false，因此您可以在if语句中使用它。你可以用它来和一个无数字作比较。然而，下面给出了三个陈述

// Statement 0
// jQuery/Ajax has replace [ document.getElementById with $ sign ] and etc
// if you don't want to use jQuery/ajax


if (document.getElementById(name)) {
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}


// Statement 1
if ($('#'+ name).length){ // if 0 then false ; if not 0 then true
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}


// Statement 2
if(!$('#'+ name).length){ // ! Means Not. So if it 0 not then [0 not is 1]
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}
// Statement 3
if ($('#'+ name).length > 0 ) {
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}


// Statement 4
if ($('#'+ name).length !== 0 ) { // length not equal to 0 which mean exist.
$("div#page-content div#chatbar").append("<div class='labels'>" + name + "</div><div id='" + name + "'></div>");
}
小开

最简单的方法是…

if(window["myId"]){
// ..
}

这也是HTML5规范的一部分:https://www.w3.org/TR/html5/single-page.html#accessing-other-browsing-contexts#named-access-on-the-window-object

window[name]
Returns the indicated element or collection of elements.
小开

下面是我使用的jQuery函数:

function isExists(var elemId){
return jQuery('#'+elemId).length > 0;
}

返回一个布尔值。如果元素存在，则返回true。 如果要按类名选择元素，只需将#替换为.


提交答案