jQuery-Selektoren für benutzerdefinierte Datenattribute mit HTML5

Question

Ich möchte wissen, welche Selektoren für diese Datenattribute, die mit HTML5 kommen, verfügbar sind.

Nehmen wir dieses Stück HTML als Beispiel:

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

Gibt es Selektoren zu bekommen:

• Alle Elemente mit data-company="Microsoft" debajo de "Companies"
• Alle Elemente mit data-company!="Microsoft" debajo de "Companies"
• In anderen Fällen ist es möglich, andere Selektoren wie "enthält, kleiner als, größer als, etc..." zu verwenden.

Answer 1

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

Blick in jQuery-Selektoren :contains ist ein Selektor

Hier finden Sie Informationen über die :enthält Selektor

Answer 2

jQuery UI hat eine :data() Selektor die ebenfalls verwendet werden können. Es gibt sie schon seit Version 1.7.0 scheint es.

Sie können ihn wie folgt verwenden:

Ermittelt alle Elemente mit einem data-company Attribut

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

Ermittelt alle Elemente, bei denen data-company ist gleich Microsoft

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

Ermittelt alle Elemente, bei denen data-company ist nicht gleich Microsoft

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

usw...

Ein Vorbehalt der neuen :data() Selektor ist, dass Sie die Option data Wert nach Code damit sie ausgewählt wird. Dies bedeutet, dass für die obige Vorgehensweise die Definition der data in HTML ist nicht genug. Sie müssen zuerst dies tun:

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

Dies ist gut für einseitige Anwendungen, bei denen Sie wahrscheinlich $(...).data("datakey", "value") auf diese oder ähnliche Weise.

Answer 3

jsFiddle Demo

jQuery bietet mehrere Selektoren (vollständige Liste) um die Anfragen zu stellen, die Sie auf der Suche nach Arbeit stellen. Um Ihre Frage zu beantworten "Ist es in anderen Fällen möglich, andere Selektoren wie "enthält, kleiner als, größer als, etc..." zu verwenden?" können Sie auch contains, starts with und ends with verwenden, um diese html5-Datenattribute zu betrachten. Sehen Sie sich die vollständige Liste oben an, um alle Ihre Optionen zu sehen.

Die grundlegenden Abfragen wurden oben behandelt, und mit John Hartsock 's Antwort ist die beste Möglichkeit, entweder jedes Datenunternehmenselement zu erhalten oder jedes Element außer Microsoft (oder einer anderen Version von :not ).

Um dies auf die anderen von Ihnen gesuchten Punkte auszudehnen, können wir mehrere Metaselektoren verwenden. Wenn Sie mehrere Abfragen durchführen wollen, ist es sinnvoll, die übergeordnete Auswahl in den Cache zu stellen.

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

Als Nächstes können wir nach Unternehmen in dieser Menge suchen, die mit G beginnen

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

Oder vielleicht Unternehmen, die das Wort soft enthalten

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

Es ist auch möglich, Elemente zu erhalten, deren Endung des Datenattributs mit

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>

Answer 4

Reine/Vanille JS-Lösung (Arbeitsbeispiel aquí )

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

Unter querySelectorAll müssen Sie gültige CSS-Selektor (derzeit Stufe3 )

GESCHWINDIGKEITSTEST (29.06.2018) für jQuery und Pure JS: Der Test wurde auf MacOs High Sierra 10.13.3 mit Chrome 67.0.3396.99 (64-bit), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64-bit) durchgeführt. Der untenstehende Screenshot zeigt die Ergebnisse für den schnellsten Browser (Safari):

PureJS war auf Chrome etwa 12 %, auf Firefox 21 % und auf Safari 25 % schneller als jQuery. Interessanterweise lag die Geschwindigkeit für Chrome bei 18,9 Millionen Operationen pro Sekunde, für Firefox bei 26 Millionen und für Safari bei 160,9 Millionen (!).

Gewinner ist also PureJS und der schnellste Browser ist Safari (mehr als 8x schneller als Chrome!)

Hier können Sie einen Test auf Ihrem Rechner durchführen: https://jsperf.com/js-selectors-x

Answer 5

Eine Sache ist, was ist

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

Aber Sie könnten Ihren eigenen Selektor erfinden:

function a() {
    inner= $("ul[data-group='Companies']");
    h = // get first child of inner([ 0])
    var ret = [] 

    while (h.nextSibling()) {
        if (h.Company == "Microsoft") {
            ret.push(h)
        };
        h = h.nextSibling();
    }
    return ret
}