JQuery'de belirli bir kimliğe sahip div olup olmadığını nasıl bulabilirim?


266

Tıklamada <div>bir öğeye ekleyen bir işlevim var . İşlev, tıklanan öğenin metnini alır ve adlı değişkene atar name. Bu değişken daha sonra <div> idekteki eleman olarak kullanılır .

Ben öğeyi eklemeden önce a <div> idile namezaten var olup olmadığını görmek gerekir ama bunu nasıl bulacağımı bilmiyorum.

İşte benim kod:

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

Bu oldukça basit görünüyor ama " Sınıf adı aranırken beklenmeyen dosya sonu " hatasını alıyorum . Bunun ne anlama geldiğine dair hiçbir fikrim yok.

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

Dahası, bu öğeyi kapatırsam daha sonra div id [name]belgeden kaldırması gereken ancak .remove()bunu yapmayan bu öğeyi silmek istiyorum .

İşte bunun için kod:

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

.mini-closeEkleme işlevine bir çocuk olarak ekledim , bu .labelsyüzden <div>gerekirse ekli olanı kapatmanın bir yolu vardı. Tıkladıktan .mini-closeve aynı adı tekrar tıklatmaya çalıştıktan sonra li.friendshala ifademin div id [name]ilk bölümünü bulur ve döndürür if.


Beklenmeyen dosya sonu genellikle bir yerde bir sözdizimi hatasına düşer. $("div#" + name).css({bottom: '30px'});yanlış, olmalı$("div#" + name).css('bottom', '30px');
Jay Irvine

Remove () öğesi DOM ağacından ayırır, ancak onu yok etmez, bu nedenle kimliğe göre arama yine de bulur, eğer bir değişkene atamış olsaydınız hala orada olurdu, vb. Bulun, doğru div'a ekleyin (zaten varsa hiçbir şey olmayacak, eğer çıkarılmış / çıkarılmışsa yeniden görünecektir), bulunmazsa, oluşturun.
Jay Irvine

Yanıtlar:


539

.lengthSeçiciden sonra, bunun gibi herhangi bir öğeyle eşleşip eşleşmediğini görmek için kullanabilirsiniz :

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

Tam sürüm:

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

Veya bu bölüm için jQuery olmayan sürüm (bir kimlik olduğu için):

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

98
non-jQuery bölümünde bir sürü jQuery: p
jAndy

@Nick - bu benim için çalışmıyor. Sorun giderme sırasında [name] öğesinin div kimliğinin uzunluğunu uyardım ancak hiçbir zaman bulamıyor.
sadmicrowave

8
($ ("#" + ad) .length) {} düzgün çalışıyorsa == 0 gerekli değildir.
ScottE

3
@ScottE - Bu tersi, demek istedin !$("#"+name).length):)
Nick Craver

1
Sanırım ===testere yerine yapmalısın ==.
danger89

66

Nick'in cevabı çiviyi kesiyor. Ayrıca getElementById dönüş değerini doğrudan null ile karşılaştırmak yerine doğrudan durumunuz olarak kullanabilirsiniz (her iki şekilde de çalışır, ancak kişisel olarak bu stili biraz daha okunabilir buluyorum):

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

haklısın, bu harika çalışıyor (aptalca bir şey yapmalıydım). Ancak alert () 'i başka bir şeyle değiştirdiğimde "sınıf adı aranırken beklenmeyen dosya sonu" hatası alıyorum. bu neden oluyor? Uyarı ()
işlevimle

başka herhangi bir fikir var mı?
sadmicrowave

2
Hata, köşeli parantez veya noktalı virgül eksik gibi görünüyor.
Rikki

@Philo Bir dizi içinde tutulan belirli kimliklerle
eşleşmek istiyorsanız

Bir dizide birkaç kimliğiniz var ve bunların her birini mi bulmak istiyorsunuz? Kaba kuvvet yaklaşımı dizi üzerinde döngü ve her biri için getElementById çağırmak olacaktır.
philo

31

Seçicinin uzunluğunu kontrol etmeye çalışın, eğer size bir şey döndürürse, elemanın var olmaması gerekir.

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
}

İd için ilk if koşulunu ve sınıf için 2. if koşulunu kullanın.


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

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

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

}

Başka bir kısayol yolu:

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

Bu sadece bir şey yazabilir if işlevi içinde bir örnek, id ("#myDiv") mevcut olduğunda mevcut.
Sanjib Debnath

5

Aşağıdaki gibi jquery kullanarak kontrol edebilirsiniz:

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

1
eğer ($ ('# divId'). uzunluk! = 0) {Burada Kodunuz} bu doğru olur
Santosh


3

İşte kullandığım jQuery işlevi:

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

Bu bir boolean değeri döndürür. Öğe varsa, true değerini döndürür. Sınıf adıyla elemanı seçmek isterseniz, sadece değiştirmek #ile.


2

Farklı şekillerde halledebilirsiniz,

Amaç div'ın var olup olmadığını kontrol etmek ve ardından kodu yürütmektir. Basit.

Durum:

$('#myDiv').length

Not:

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

Bu, her yürütüldüğünde bir sayı döndürür, böylece div yoksa Sıfır [0] verir ve biz 0 olarak ikili dosyada false olarak temsil edilebilir, böylece if deyiminde kullanabilirsiniz. Ve bunu hiçbir sayı ile karşılaştırma olarak kullanabilirsiniz. herhangi biri aşağıda verilen üç ifade vardır

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

1

jquery denemek istediğiniz kimliği koymak yöntemdir.

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
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.