Làm thế nào để tìm nếu div có id cụ thể tồn tại trong jQuery?

Tôi đã có một chức năng nối thêm một <div>yếu tố khi nhấp chuột. Hàm lấy văn bản của phần tử được nhấp và gán nó cho một biến được gọi làname . Biến đó sau đó được sử dụng làm <div> idphần tử được nối thêm.

Tôi cần phải xem nếu một <div> id với nameđã tồn tại trước khi tôi thêm phần tử nhưng tôi không biết làm thế nào để tìm thấy điều này.

Đây là mã của tôi:

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

Điều này có vẻ khá đơn giản nhưng tôi đang gặp phải lỗi Kết thúc tập tin bất ngờ trong khi tìm kiếm tên lớp . Tôi không biết điều đó có nghĩa là gì.

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

Thêm nữa là tôi muốn có thể xóa phần tử này nếu tôi đóng nó ra và sau đó sẽ xóa phần tử div id [name]khỏi tài liệu nhưng .remove()không làm điều này.

Đây là mã cho điều đó:

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

Tôi đã thêm vào .mini-closechức năng chắp thêm khi còn nhỏ .labelsđể có một cách để thoát khỏi phần bổ sung <div>nếu cần. Sau khi nhấp .mini-closevà cố gắng nhấp lại cùng tên từ li.friendsđó, nó vẫn tìm thấy div id [name]và trả về phần đầu tiên của ifcâu lệnh của tôi .

Bạn có thể sử dụng .lengthsau bộ chọn để xem nó có khớp với bất kỳ thành phần nào không, như thế này:

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

Phiên bản đầy đủ:

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

Hoặc, phiên bản không phải jQuery cho phần này (vì đó là 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');
  }
});

Nick trả lời đinh nó. Bạn cũng có thể sử dụng trực tiếp giá trị trả về của getEuityById, thay vì so sánh nó với null (cách này hoạt động, nhưng cá nhân tôi thấy phong cách này dễ đọc hơn một chút):

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

Hãy thử kiểm tra độ dài của bộ chọn, nếu nó trả về cho bạn một cái gì đó thì phần tử phải tồn tại không.

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
}

Sử dụng điều kiện if đầu tiên cho id và thứ 2 cho lớp.

if($("#id").length) /*exists*/

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

if ( $( "#myDiv" ).length ) {
    //id id ( "#myDiv" ) is exist this will perform
    $( "#myDiv" ).show();

}

Một cách viết tắt khác:

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

Bạn có thể kiểm tra bằng cách sử dụng jquery đơn giản như thế này:

if($('#divId').length!==0){
      Your Code Here
}

Cách đơn giản nhất là ..

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

Đây cũng là một phần của thông số kỹ thuật 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.

Đây là hàm jQuery tôi sử dụng:

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

Điều này sẽ trả về một giá trị boolean. Nếu phần tử tồn tại, nó trả về true. Nếu bạn muốn chọn thành phần theo tên lớp, chỉ cần thay thế #bằng.

Bạn có thể xử lý nó theo nhiều cách khác nhau,

Mục tiêu là kiểm tra xem div có tồn tại không, sau đó thực thi mã. Đơn giản.

Tình trạng:

$('#myDiv').length

Ghi chú:

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

Điều này sẽ trả về một số mỗi khi nó được thực thi, vì vậy nếu không có div, nó sẽ cho số 0 [0] và vì chúng ta không có 0 có thể được biểu thị là sai trong nhị phân để bạn có thể sử dụng nó trong câu lệnh if. Và bạn có thể sử dụng nó như là một so sánh với một số không. trong khi bất kỳ có ba tuyên bố dưới đây

// 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>");
    }

Đặt id bạn muốn kiểm tra trong jquery là phương thức.

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
}