เลือกองค์ประกอบตามคุณสมบัติ

ฉันมีช่องทำเครื่องหมายที่มีรหัสที่สร้างขึ้นและบางส่วนมีคุณสมบัติพิเศษ เป็นไปได้ไหมที่จะใช้ JQuery เพื่อตรวจสอบว่าองค์ประกอบมีคุณสมบัติเฉพาะหรือไม่? ตัวอย่างเช่นฉันสามารถตรวจสอบว่าองค์ประกอบต่อไปนี้มีแอตทริบิวต์ "myattr" หรือไม่ ค่าของคุณสมบัติสามารถแตกต่างกันไป

<input type="checkbox" id="A" myattr="val_attr">A</input>

ตัวอย่างเช่นฉันจะรับชุดรวมทั้งหมดของช่องทำเครื่องหมายที่มีคุณลักษณะนี้โดยไม่ทำเครื่องหมายทีละรายการได้อย่างไร เป็นไปได้ไหม

คุณหมายถึงคุณสามารถเลือกพวกเขา? ถ้าเป็นเช่นนั้นใช่:

$(":checkbox[myattr]")

if ($('#A').attr('myattr')) {
    // attribute exists
} else {
    // attribute does not exist
}

แก้ไข:

ข้างต้นจะอยู่ในelse-branch เมื่อmyattrมีอยู่ แต่เป็นสตริงว่างหรือ "0" หากเป็นปัญหาคุณควรทดสอบอย่างชัดเจนในundefined:

if ($('#A').attr('myattr') !== undefined) {
    // attribute exists
} else {
    // attribute does not exist
}

ฉันรู้ว่าเป็นเวลานานแล้วตั้งแต่คำถามถูกถาม แต่ฉันพบว่าเช็คมีความชัดเจนเช่นนี้:

if ($("#A").is('[myattr]')) {
    // attribute exists
} else {
    // attribute does not exist
}

(เท่าที่พบในเว็บไซต์นี้ที่นี่ )

เอกสารเกี่ยวกับการจะสามารถพบได้ที่นี่

สิ่งนี้จะได้ผล:

$('#A')[0].hasAttribute('myattr');

ใน JavaScript, ...

null == undefined

... ส่งคืนtrue* มันเป็นความแตกต่างระหว่างและ== ===นอกจากนี้ยังundefinedสามารถกำหนดชื่อได้ (ไม่ใช่คำหลักที่เหมือนกันnull) ดังนั้นคุณควรตรวจสอบวิธีอื่นดีกว่า วิธีที่น่าเชื่อถือที่สุดน่าจะเป็นการเปรียบเทียบค่าตอบแทนของtypeofผู้ปฏิบัติงาน

typeof o == "undefined"

อย่างไรก็ตามการเปรียบเทียบกับ null ควรทำงานในกรณีนี้

* undefinedในความเป็นจริงแล้วยังไม่ได้กำหนด

$("input[attr]").length อาจเป็นตัวเลือกที่ดีกว่า

แนวคิดสองสามอย่างถูกโยนโดยใช้ "typeof", jQuery ".is" และ ".filter" ดังนั้นฉันคิดว่าฉันจะโพสต์การเปรียบเทียบที่สมบูรณ์แบบของพวกเขา ประเภทของดูเหมือนจะเป็นตัวเลือกที่ดีที่สุดสำหรับสิ่งนี้ ในขณะที่คนอื่นจะทำงานดูเหมือนจะมีความแตกต่างของประสิทธิภาพที่ชัดเจนเมื่อเรียกใช้ไลบรารี jq สำหรับความพยายามนี้

if (!$("#element").attr('my_attr')){
  //return false
  //attribute doesn't exists
}

เช่นเดียวกับในโพสต์นี้การใช้.isและตัวเลือกแอททริบิวต์[]คุณสามารถเพิ่มฟังก์ชั่น (หรือต้นแบบ) ได้อย่างง่ายดาย:

function hasAttr($sel,attr) {
    return $sel.is('['+attr+']');
}

$("input#A").attr("myattr") == null

เพียง:

$('input[name*="value"]')

ข้อมูลเพิ่มเติม: เอกสารอย่างเป็นทางการ

นอกเหนือจากการเลือกองค์ประกอบทั้งหมดด้วยแอททริบิวต์$('[someAttribute]')หรือ$('input[someAttribute]')คุณสามารถใช้ฟังก์ชันสำหรับการตรวจสอบบูลีนบนวัตถุเช่นในตัวจัดการการคลิก:

if(! this.hasAttribute('myattr') ) { ...

ฉันได้สร้างแพ็กเกจ NPM ที่มีพฤติกรรมตามที่อธิบายไว้ข้างต้น

ลิงก์ไปยัง[npm]และ[github]

การใช้งานง่ายมาก ตัวอย่างเช่น:

<p id="test" class="test">something</p>
$("#test").hasAttr("class")

ผลตอบแทนจริง

ทำงานร่วมกับอูฐด้วย

หากต้องการเลือกองค์ประกอบที่มีแอตทริบิวต์ที่แน่นอนให้ดูคำตอบด้านบน

ในการตรวจสอบว่าองค์ประกอบ jQuery ที่กำหนดมีแอตทริบิวต์เฉพาะฉันใช้ปลั๊กอินขนาดเล็กที่ส่งกลับtrueถ้าองค์ประกอบแรกในคอลเลกชัน ajQuery มีคุณลักษณะนี้:

/** hasAttr
 ** helper plugin returning boolean if the first element of the collection has a certain attribute
 **/
$.fn.hasAttr = function(attr) {
   return 0 < this.length
       && 'undefined' !== typeof attr
       && undefined !== attr
       && this[0].hasAttribute(attr)
}

JQuery จะส่งคืนแอตทริบิวต์เป็นสตริง ดังนั้นคุณสามารถตรวจสอบความยาวของสตริงนั้นเพื่อตรวจสอบว่ามีการตั้งค่า:

if ($("input#A").attr("myattr").length == 0)
 return null;
else
 return $("input#A").attr("myattr");