ตัวเลือก jQuery เกี่ยวกับแอตทริบิวต์ข้อมูลที่กำหนดเองโดยใช้ HTML5

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

นำ HTML ชิ้นนี้มาเป็นตัวอย่าง:

<ul data-group="Companies">
  <li data-company="Microsoft"></li>
  <li data-company="Google"></li>
  <li data-company ="Facebook"></li>
</ul>

มีตัวเลือกที่จะได้รับ:

• องค์ประกอบทั้งหมดที่มีdata-company="Microsoft"ด้านล่าง"Companies"
• องค์ประกอบทั้งหมดที่มีdata-company!="Microsoft"ด้านล่าง"Companies"
• ในกรณีอื่น ๆ มันเป็นไปได้ที่จะใช้ตัวเลือกอื่น ๆ เช่น "มีน้อยกว่ามากกว่า ฯลฯ ... "

$("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below "Companies"

$("ul[data-group='Companies'] li:not([data-company='Microsoft'])") //get all elements with data-company!="Microsoft" below "Companies"

มองหาในjQuery Selectors : containเป็นตัวเลือก

นี่คือข้อมูลเกี่ยวกับ: ประกอบด้วยตัวเลือก

jQuery UIมี:data()ตัวเลือกที่สามารถใช้ มันมีมาตั้งแต่รุ่น 1.7.0ดูเหมือนว่า

คุณสามารถใช้สิ่งนี้:

รับองค์ประกอบทั้งหมดพร้อมdata-companyแอตทริบิวต์

var companyElements = $("ul:data(group) li:data(company)");

รับองค์ประกอบทั้งหมดที่data-companyเท่ากับMicrosoft

var microsoft = $("ul:data(group) li:data(company)")
                    .filter(function () {
                        return $(this).data("company") == "Microsoft";
                    });

รับองค์ประกอบทั้งหมดที่data-companyไม่เท่ากันMicrosoft

var notMicrosoft = $("ul:data(group) li:data(company)")
                       .filter(function () {
                           return $(this).data("company") != "Microsoft";
                       });

ฯลฯ ...

หนึ่งข้อแม้ของ:data()ตัวเลือกใหม่คือคุณต้องตั้งdataค่าตามรหัสเพื่อให้เลือก ซึ่งหมายความว่าสำหรับข้างต้นในการทำงานการกำหนดdataใน HTML ไม่เพียงพอ คุณต้องทำสิ่งนี้ก่อน:

$("li").first().data("company", "Microsoft");

นี่เป็นสิ่งที่ดีสำหรับแอปพลิเคชันหน้าเดียวที่คุณมีแนวโน้มที่จะใช้$(...).data("datakey", "value")ในรูปแบบนี้หรือคล้ายกัน

jsFiddle Demo

jQuery มีตัวเลือกหลายตัว (รายการแบบเต็ม)เพื่อสร้างแบบสอบถามที่คุณกำลังมองหางาน ในการตอบคำถามของคุณ"ในกรณีอื่น ๆ คุณสามารถใช้ตัวเลือกอื่น ๆ เช่น" มีน้อยกว่ามากกว่า ฯลฯ ... " คุณยังสามารถใช้ประกอบด้วยเริ่มต้นและสิ้นสุดด้วยเพื่อดูแอตทริบิวต์ข้อมูล html5 เหล่านี้ ดูรายการทั้งหมดด้านบนเพื่อดูตัวเลือกทั้งหมดของคุณ

การสืบค้นพื้นฐานได้รับการกล่าวถึงข้างต้นและการใช้คำตอบของJohn Hartsockจะเป็นทางออกที่ดีที่สุดในการรับองค์ประกอบของ บริษัท ข้อมูลหรือเพื่อรับทุกอย่างยกเว้น Microsoft (หรือรุ่นอื่น ๆ):not

เพื่อที่จะขยายจุดนี้ไปยังจุดอื่น ๆ ที่คุณกำลังค้นหาเราสามารถใช้ตัวเลือกเมตาหลายตัว ก่อนอื่นถ้าคุณจะทำหลายแบบสอบถามก็เป็นการดีที่จะเลือกแคชผู้ปกครอง

var group = $('ul[data-group="Companies"]');

ต่อไปเราสามารถค้นหา บริษัท ในชุดนี้ที่เริ่มต้นด้วย G

var google = $('[data-company^="G"]',group);//google

หรือบางที บริษัท ที่มีคำว่าเบา

var microsoft = $('[data-company*="soft"]',group);//microsoft

นอกจากนี้ยังเป็นไปได้ที่จะได้รับองค์ประกอบที่ตรงกับตอนจบของแอตทริบิวต์ข้อมูล

var facebook = $('[data-company$="book"]',group);//facebook

//stored selector
var group = $('ul[data-group="Companies"]');

//data-company starts with G
var google = $('[data-company^="G"]',group).css('color','green');

//data-company contains soft
var microsoft = $('[data-company*="soft"]',group).css('color','blue');

//data-company ends with book
var facebook = $('[data-company$="book"]',group).css('color','pink');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-group="Companies">
  <li data-company="Microsoft">Microsoft</li>
  <li data-company="Google">Google</li>
  <li data-company ="Facebook">Facebook</li>
</ul>

Pure / vanilla JS solution (ตัวอย่างการทำงานที่นี่ )

// All elements with data-company="Microsoft" below "Companies"
let a = document.querySelectorAll("[data-group='Companies'] [data-company='Microsoft']"); 

// All elements with data-company!="Microsoft" below "Companies"
let b = document.querySelectorAll("[data-group='Companies'] :not([data-company='Microsoft'])"); 

ในquerySelector ทั้งหมดคุณต้องใช้ตัวเลือก CSS ที่ถูกต้อง(ปัจจุบันเป็นLevel3 )

ทดสอบความเร็ว (2018.06.29) สำหรับ jQuery และ Pure JS: ทำการทดสอบบน MacOs High Sierra 10.13.3 บน Chrome 67.0.3396.99 (64 บิต), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 -นิดหน่อย). ภาพหน้าจอด้านล่างแสดงผลลัพธ์สำหรับเบราว์เซอร์ที่เร็วที่สุด (Safari):

PureJS เร็วกว่า jQuery ประมาณ 12% สำหรับ Chrome, 21% สำหรับ Firefox และ 25% สำหรับ Safari ความเร็วที่น่าสนใจสำหรับ Chrome คือการทำงาน 18.9M ต่อวินาที, Firefox 26M, Safari 160.9M (!)

ดังนั้นผู้ชนะคือ PureJSและเบราว์เซอร์ที่เร็วที่สุดคือSafari (มากกว่า 8x เร็วกว่า Chrome!)

ที่นี่คุณสามารถทำการทดสอบบนเครื่องของคุณ: https://jsperf.com/js-selectors-x