Hoe te vinden als Div met specifieke ID in jQuery bestaat?

Ik heb een functie die een <div>aan een element op klik voegt. De functie krijgt de tekst van het geklikte element en wijst het toe aan een variabele die namewordt genoemd. Die variabele wordt vervolgens gebruikt als de <div>idvan het bijgevoegde element.

Ik moet zien of een <div>idmet nameAl bestaat voordat ik het element bijvoegt, maar ik weet het niet Hoe dit te vinden.

Hier is mijn code:

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

Dit lijkt vrij eenvoudig, maar ik krijg de foutmelding “onverwacht einde van het bestand tijdens het zoeken naar de klasnaam” . Ik heb geen idee wat dat betekent.

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

Bovendien is dat ik dit element wil verwijderen als ik het sluit, wat dan de div id [name]uit het document moet verwijderen, maar .remove()Doe dit niet.

Hier is de code voor:

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

Ik heb .mini-closetoegevoegd aan de append-functie als een onderliggende functie van .labels, dus er was een manier om de toegevoegde <div>indien nodig. Na het klikken op .mini-closeen opnieuw proberen op dezelfde naam te klikken van li.friendsvindt het nog steeds de div id [name]en keert terug het eerste deel van mijn if-statement.

Antwoord 1, autoriteit 100%

U kunt .lengthgebruiken na de selector om te zien of het kwam overeen met alle elementen, zoals deze:

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

De volledige versie:

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

Of de niet-jQuery-versie voor dit deel (omdat het een ID is):

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

Antwoord 2, autoriteit 11%

Het antwoord van Nick klopt. Je zou ook de geretourneerde waarde van getElementById rechtstreeks als je voorwaarde kunnen gebruiken, in plaats van deze te vergelijken met null (beide manier werkt, maar ik vind deze stijl persoonlijk iets leesbaarder):

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

Antwoord 3, autoriteit 6%

Probeer de lengte van de selector te controleren, als het je iets oplevert, dan moet het element bestaan, anders niet.

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
}

Gebruik de eerste if-voorwaarde voor id en de tweede voor klasse.

Antwoord 4, autoriteit 4%

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

Antwoord 5, autoriteit 2%

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

Een andere verkorte manier:

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

Antwoord 6

De meest eenvoudige manier is..

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

Dit maakt ook deel uit van de HTML5-specificaties: https://www.w3.org/TR/html5/single-page.html#accessing-other-browsing-contexts#named-access-on-the-window- voorwerp

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

Antwoord 7

Je kunt dit controleren door jQuery op de volgende manier te gebruiken:

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

Antwoord 8

Hier is de jQuery-functie die ik gebruik:

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

Hiermee wordt een booleaanse waarde geretourneerd. Als het element bestaat, retourneert het waar.
Als je een element op klassenaam wilt selecteren, vervang dan gewoon #door .

Antwoord 9

Je kunt er op verschillende manieren mee omgaan,

Doelis om te controleren of de div bestaat en vervolgens de code uit te voeren. Eenvoudig.

Staat:

$('#myDiv').length

Opmerking:

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

Dit geeft elke keer dat het wordt uitgevoerd een getal terug, dus als er geen div is, geeft het een nul [0], en omdat we geen 0 kunnen worden weergegeven als onwaar in binair getal, kun je het gebruiken in een if-statement. En je kunt het gebruiken als een vergelijking met een nulnummer. terwijl er zijn drie verklaringen hieronder gegeven

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

Antwoord 10

plaats de id die u wilt inchecken in jQuery is methode.

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
}