จะทราบได้อย่างไรว่า 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ดังนั้นจึงมีวิธีการปิดการผนวก<div>ถ้าจำเป็น หลังจากคลิก.mini-closeและพยายามที่จะคลิกชื่อเดิมอีกครั้งจากli.friendsนั้นก็ยังพบdiv id [name]และส่งกลับส่วนแรกของifคำสั่งของฉัน

คุณสามารถใช้.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
}

ใช้เงื่อนไขข้อแรกสำหรับ id และเงื่อนไขข้อที่ 2 สำหรับคลาส

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

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

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

}

อีกวิธีชวเลข:

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

คุณสามารถตรวจสอบโดยใช้ jquery เช่นนี้:

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

วิธีที่ง่ายที่สุดคือ ..

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

นี่จะคืนค่าบูลีน หากองค์ประกอบมีอยู่ก็จะส่งกลับจริง หากคุณต้องการเลือกองค์ประกอบตามชื่อคลาสเพียงแทนที่#ด้วย.

คุณสามารถจัดการกับมันได้หลายวิธี

วัตถุประสงค์คือเพื่อตรวจสอบว่า div มีอยู่แล้วเรียกใช้งานโค้ด ง่าย

เงื่อนไข:

$('#myDiv').length

บันทึก:

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

นี่จะส่งกลับตัวเลขทุกครั้งที่มีการดำเนินการดังนั้นหากไม่มี div มันจะให้ศูนย์ [0] และเนื่องจากเราไม่มี 0 สามารถแสดงว่าเป็นเท็จในไบนารีดังนั้นคุณสามารถใช้มันในถ้าคำสั่ง และคุณสามารถใช้มันเป็นการเปรียบเทียบกับตัวเลขที่ไม่มี ในขณะที่มีสามคำให้ด้านล่าง

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

ใส่รหัสที่คุณต้องการตรวจสอบใน jquery เป็นวิธีการ

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
}