Bagaimana menemukan jika div dengan id tertentu ada di jQuery?

Saya memiliki fungsi yang menambahkan <div>elemen ke klik. Fungsi ini mendapatkan teks dari elemen yang diklik dan menetapkannya ke variabel yang disebut name. Variabel itu kemudian digunakan sebagai <div> idelemen yang ditambahkan.

Saya perlu melihat apakah <div> iddengan namesudah ada sebelum saya menambahkan elemen tetapi saya tidak tahu bagaimana menemukan ini.

Ini kode saya:

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

Ini sepertinya cukup mudah tetapi saya mendapatkan kesalahan " Akhir file yang tidak terduga saat mencari nama kelas" . Saya tidak tahu apa artinya itu.

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

Terlebih lagi adalah bahwa saya ingin dapat menghapus elemen ini jika saya menutupnya yang kemudian harus menghapus div id [name]dari dokumen tetapi .remove()tidak melakukan ini.

Ini kode untuk itu:

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

Saya menambahkan .mini-closeke fungsi append sebagai anak .labelssehingga ada cara untuk menutup dari append <div>jika diperlukan. Setelah mengklik .mini-closedan mencoba mengklik nama yang sama lagi dari li.friendssana masih menemukan div id [name]dan mengembalikan bagian pertama dari ifpernyataan saya .

Anda dapat menggunakan .lengthsetelah pemilih untuk melihat apakah itu cocok dengan elemen apa pun, seperti ini:

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

Versi lengkap:

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

Atau, versi non-jQuery untuk bagian ini (karena ini adalah 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');
  }
});

Jawaban Nick berhasil. Anda juga dapat menggunakan nilai pengembalian getElementById secara langsung sebagai kondisi Anda, daripada membandingkannya dengan nol (cara apa pun bekerja, tetapi saya pribadi menemukan gaya ini sedikit lebih mudah dibaca):

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

Cobalah untuk memeriksa panjang pemilih, jika mengembalikan Anda sesuatu maka elemen tersebut harus ada yang lain tidak.

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
}

Gunakan kondisi pertama jika untuk id dan yang kedua untuk kelas.

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

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

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

}

Cara singkat lainnya:

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

Anda dapat memeriksa dengan menggunakan jquery seperti ini:

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

Cara paling sederhana adalah ..

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

Ini juga bagian dari spesifikasi 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.

Berikut adalah fungsi jQuery yang saya gunakan:

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

Ini akan mengembalikan nilai boolean. Jika elemen ada, itu mengembalikan true. Jika Anda ingin memilih elemen berdasarkan nama kelas, cukup ganti #dengan.

Anda dapat menanganinya dengan cara yang berbeda,

Objektif adalah untuk memeriksa apakah div ada kemudian jalankan kode. Sederhana.

Kondisi:

$('#myDiv').length

catatan:

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

Ini akan mengembalikan angka setiap kali dieksekusi jadi jika tidak ada div itu akan memberikan Nol [0], dan karena kita tidak ada 0 dapat dinyatakan sebagai false dalam biner sehingga Anda dapat menggunakannya dalam pernyataan if. Dan Anda dapat menggunakannya sebagai perbandingan dengan nomor tidak ada. sementara pun ada tiga pernyataan yang diberikan di bawah ini

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

masukkan id yang ingin Anda periksa di jquery adalah metode.

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
}