jQuery ตรวจสอบว่าคลาสที่ตรงกันมี id ที่กำหนดหรือไม่

jQuery คืออะไรมี id เทียบเท่ากับคำสั่งต่อไปนี้

$('#mydiv').hasClass('foo')

เพื่อให้คุณสามารถตั้งชื่อคลาสและตรวจสอบว่ามี id ที่ให้มาหรือไม่

สิ่งที่ต้องการ:

$('.mydiv').hasId('foo')

คุณสามารถอบตรรกะที่เป็นตัวเลือกโดยการรวมตัวเลือกหลาย ตัวอย่างเช่นเราสามารถกำหนดเป้าหมายองค์ประกอบทั้งหมดด้วย id ที่กำหนดซึ่งมีคลาสเฉพาะ:

$("#foo.bar"); // Matches <div id="foo" class="bar">

สิ่งนี้ควรมีลักษณะคล้ายกับสิ่งที่คุณเขียนใน CSS โปรดทราบว่าจะใช้ไม่ได้กับ#fooองค์ประกอบทั้งหมด(แม้ว่าควรมีเพียงหนึ่งรายการ) และจะไม่ใช้กับ.barองค์ประกอบทั้งหมด(แม้ว่าอาจมีหลายองค์ประกอบ) จะอ้างอิงเฉพาะองค์ประกอบที่มีคุณสมบัติตามคุณสมบัติทั้งสอง

jQuery ยังมี.isวิธีการที่ยอดเยี่ยมที่ช่วยให้คุณตัดสินใจได้ว่าองค์ประกอบนั้นมีคุณสมบัติบางอย่างหรือไม่ คุณสามารถทดสอบคอลเล็กชัน jQuery กับตัวเลือกสตริงองค์ประกอบ HTML หรือวัตถุ jQuery อื่นได้ ในกรณีนี้เราจะตรวจสอบกับตัวเลือกสตริง:

$(".bar:first").is("#foo"); // TRUE if first '.bar' in document is also '#foo'

ฉันอาจจะใช้$('.mydiv').is('#foo');That said ถ้าคุณรู้รหัสทำไมคุณไม่ใช้มันกับตัวเลือกตั้งแต่แรก?

อัปเดต: ขออภัยเข้าใจผิดคำถามลบ.has()คำตอบ

อีกทางเลือกหนึ่งสร้าง.hasId()ปลั๊กอิน

// the plugin
$.fn.hasId = function(id) {
  return this.attr('id') == id;
};

// select first class
$('.mydiv').hasId('foo') ?
  console.log('yes') : console.log('no');

// select second class
// $('.mydiv').eq(1).hasId('foo')
// or
$('.mydiv:eq(1)').hasId('foo') ?
  console.log('yes') : console.log('no');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="mydiv" id="foo"></div>
<div class="mydiv"></div>

สมมติว่าคุณกำลังทำซ้ำผ่านวัตถุ DOM และคุณต้องการค้นหาและจับองค์ประกอบที่มี ID บางอย่าง

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
</div>

คุณสามารถเขียนสิ่งที่ต้องการค้นหา

$('#myDiv').find('#bar')

โปรดทราบว่าหากคุณใช้ตัวเลือกคลาสเมธอด find จะส่งคืนองค์ประกอบที่ตรงกันทั้งหมด

หรือคุณสามารถเขียนฟังก์ชันการทำซ้ำซึ่งจะทำงานขั้นสูงขึ้น

<div id="myDiv">
    <div id="fo"><div>
    <div id="bar"><div>
    <div id="fo1"><div>
    <div id="bar1"><div>
    <div id="fo2"><div>
    <div id="bar2"><div>
</div>

$('#myDiv div').each(function() {
   if($(this).attr('id') == 'bar1')
       //do something with bar1
});

รหัสเดียวกันสามารถแก้ไขได้ง่ายสำหรับตัวเลือกคลาส

<div id="myDiv">
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="bar"><div>
    <div class="fo"><div>
    <div class="bar"><div>
</div>

$('#myDiv div').each(function() {
   if($(this).hasClass('bar'))
       //do something with bar
});

ฉันดีใจที่คุณแก้ปัญหาด้วย index () สิ่งที่เคยได้ผลสำหรับคุณฉันหวังว่านี่จะช่วยคนอื่น ๆ ที่มีปัญหาเดียวกัน ไชโย :)

$('#' + theMysteryId + '.someClass').each(function() { /* do stuff */ });

เพียงเพื่อบอกว่าในที่สุดฉันก็แก้ไขสิ่งนี้โดยใช้ดัชนี ()

ไม่มีอะไรดูเหมือนจะได้ผล

ดังนั้นสำหรับองค์ประกอบพี่น้องนี่เป็นวิธีที่ดีหากคุณเลือกคลาสทั่วไปก่อนแล้วจึงต้องการแก้ไขบางอย่างที่แตกต่างกันสำหรับแต่ละองค์ประกอบเฉพาะ

แก้ไข: สำหรับผู้ที่ไม่ทราบ (เช่นฉัน) index () ให้ค่าดัชนีสำหรับแต่ละองค์ประกอบที่ตรงกับตัวเลือกโดยนับจาก 0 ขึ้นอยู่กับลำดับของพวกเขาใน DOM ตราบใดที่คุณรู้ว่า class = "foo" มีองค์ประกอบกี่อย่างคุณไม่จำเป็นต้องมี id

เห็นได้ชัดว่าสิ่งนี้ไม่ได้ช่วยเสมอไป แต่อาจมีคนพบว่ามีประโยชน์

ตรวจสอบว่ามี ID ขององค์ประกอบหรือไม่

if ($('#id').attr('id') == 'id')
{
  //OK
}

คุณยังตรวจสอบได้ด้วยว่ามีการใช้องค์ประกอบ id หรือไม่โดยทำดังนี้

if(typeof $(.div).attr('id') == undefined){
   //element has no id
} else {
   //element has id selector
}

ฉันใช้วิธีนี้สำหรับตารางข้อมูลส่วนกลางและตารางข้อมูลที่สั่งซื้อเฉพาะ