jQuery-selectors op aangepaste gegevenskenmerken met HTML5

Ik zou graag willen weten welke selectors beschikbaar zijn voor deze gegevensattributen die bij HTML5 worden geleverd.

Dit stukje HTML als voorbeeld nemen:

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

Zijn er selectors te krijgen:

• Alle elementen met data-company="Microsoft"onder "Companies"
• Alle elementen met data-company!="Microsoft"onder "Companies"
• In andere gevallen is het mogelijk om andere selectors te gebruiken, zoals “bevat, kleiner dan, groter dan, enz…”.

Antwoord 1, autoriteit 100%

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

Kijk in jQuery Selectors:contains is a selector

hier is informatie over de :contains selector

Antwoord 2, autoriteit 7%

jQuery UIheeft een :data()selectordie ook kan worden gebruikt. Het bestaat al sinds Versie 1.7.0zo lijkt het.

Je kunt het als volgt gebruiken:

Alle elementen ophalen met een data-company-kenmerk

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

Alle elementen ophalen waarbij data-companygelijk is aan Microsoft

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

Alle elementen ophalen waar data-companyniet gelijk is aan Microsoft

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

enz…

Een voorbehoud van de nieuwe :data()-selector is dat u de data-waarde per codemoet instellen voordat deze kan worden geselecteerd. Dit betekent dat om het bovenstaande te laten werken, het definiëren van de datain HTML niet voldoende is. U moet dit eerst doen:

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

Dit is prima voor toepassingen met één pagina waarbij u waarschijnlijk $(...).data("datakey", "value")op deze of soortgelijke manieren gebruikt.

Antwoord 3, autoriteit 4%

jsFiddle Demo

jQuery biedt verschillende selectors (volledige lijst) om de query’s te maken die u zoekt voor het werk. Om uw vraag “in andere gevallen aan te pakken, is het mogelijk om andere selectors te gebruiken zoals” bevat, minder dan, groter dan, enz … “.” U kunt ook gebruiken, begint, en eindigt met om deze HTML5-gegevensattributen te bekijken. Zie de volledige lijst hierboven om al uw opties te bekijken.

De basisvraag is hierboven afgedekt en met behulp van John Hartsock ‘s answer wordt de beste gok om elk gegevensbedrijfselement te krijgen, of om iedereen te krijgen, behalve Microsoft (of een andere versie van :not).

Om dit uit te breiden naar de andere punten waarnaar u op zoek bent, kunnen we verschillende meta selectors gebruiken. Eerst, als u meerdere query’s gaat doen, is het leuk om de bovenliggende selectie te cachen.

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

Vervolgens kunnen we zoeken naar bedrijven in deze set die beginnen met G

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

of misschien bedrijven die het woord zacht

bevatten

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

Het is ook mogelijk om elementen te krijgen waarvan de eindwedstrijden van de gegevenskenmerken

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>

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