HTML5 kullanarak özel veri özniteliklerindeki jQuery seçicileri

HTML5 ile gelen bu veri öznitelikleri için hangi seçicilerin kullanılabilir olduğunu bilmek istiyorum.

Bu HTML parçasını örnek olarak alalım:

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

Almak için seçiciler var mı:

• data-company="Microsoft"Aşağıdaki tüm öğeler"Companies"
• data-company!="Microsoft"Aşağıdaki tüm öğeler"Companies"
• Diğer durumlarda, "içerir, küçüktür, büyüktür, vb." Gibi diğer seçicileri kullanmak mümkündür.

$("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"

İçin bak jQuery Selectors : içeren bir seçici olduğunu

İşte bilgi içerir: seçici içerir

jQuery UIayrıca kullanılabilecek bir :data()seçiciye sahiptir. Görünüşe göre 1.7.0 Sürümünden bu yana var .

Bu şekilde kullanabilirsiniz:

Bir data-companyniteliğe sahip tüm öğeleri alma

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

data-companyEşit olduğunda tüm öğeleri alınMicrosoft

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

data-companyEşit olmayan tüm öğeleri alınMicrosoft

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

vb...

Yeni :data()seçicinin bir uyarısı, seçilebilmesi için datadeğeri koduna göre ayarlamanız gerektiğidir . Bu, yukarıdakilerin çalışması için data, HTML'de tanımlamanın yeterli olmadığı anlamına gelir . İlk önce bunu yapmalısınız:

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

Bu $(...).data("datakey", "value")veya benzeri şekillerde kullanmanız muhtemel tek sayfa uygulamaları için bu iyidir .

jsFiddle Demo

jQuery, aradığınız sorguların çalışması için çeşitli seçiciler (tam liste) sağlar . Sorunuzu "Diğer durumlarda," içerir, küçüktür, küçüktür, vb ... "gibi başka seçiciler kullanmak da mümkündür. Ayrıca, bu html5 veri özniteliklerine bakmak için içerir, ile başlar ve biter kullanabilirsiniz. Tüm seçeneklerinizi görmek için yukarıdaki tam listeye bakın.

Temel sorgulama Yukarıda ele edilmiştir ve kullanma John Hartsock 'ın cevabı her veri şirket elemanı olsun, ya da Microsoft hariç her birini (veya diğer herhangi bir sürümünü almak için ya en iyi bahis olacak :not).

Bunu aradığınız diğer noktalara genişletmek için birkaç meta seçici kullanabiliriz. İlk olarak, birden çok sorgu yapacaksanız, üst seçimi önbelleğe almak güzeldir.

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

Daha sonra, bu sette G ile başlayan şirketleri arayabiliriz

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

Ya da yumuşak kelimesini içeren şirketler

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

Veri özelliğinin sonu eşleşen öğeler elde etmek de mümkündür

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 çözümü ( buradaki çalışma örneği )

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

In querySelectorAll Geçerli kullanmalıdır CSS seçici (şu anda Düzey3 )

JQuery ve Pure JS için HIZ TESTİ (2018.06.29): test Chrome 67.0.3396.99 (64 bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 üzerinde MacOs High Sierra 10.13.3'te gerçekleştirildi -bit). Aşağıda ekran görüntüsü en hızlı tarayıcı (Safari) sonuçlarını gösterir:

PureJS, Chrome'da jQuery'den yaklaşık% 12, Firefox'ta% 21 ve Safari'de% 25 daha hızlıydı. Chrome için ilginç bir hız saniyede 18.9M işlem, Firefox 26M, Safari 160.9M (!) İdi.

Yani kazanan PureJS ve en hızlı tarayıcı Safari (Chrome'dan 8 kat daha hızlı!)

Burada makinenizde test yapabilirsiniz: https://jsperf.com/js-selectors-x