Filterelement basierend auf .data() Schlüssel/Wert

Lesezeit: 5 Minuten

Benutzer113716

Angenommen, ich habe 4 div-Elemente mit Klasse .navlinkdie, wenn sie angeklickt werden, verwenden .data() um eine Taste zu setzen genannt 'selected'auf einen Wert von true:

$('.navlink')click(function() { $(this).data('selected', true); })

Jedes Mal ein neues .navlink angeklickt wird, möchte ich die zuvor ausgewählte speichern navlink für spätere Manipulationen. Gibt es eine schnelle und einfache Möglichkeit, ein Element basierend auf dem, was gespeichert wurde, auszuwählen? .data()?

Es scheint keine jQuery zu geben : Filter das passt, und ich habe Folgendes versucht (innerhalb desselben Klickereignisses), aber aus irgendeinem Grund funktioniert es nicht:

var $previous = $('.navlink').filter( 
    function() { $(this).data("selected") == true }
);

Ich weiß, dass es andere Möglichkeiten gibt, dies zu erreichen, aber im Moment bin ich hauptsächlich neugierig, ob es über möglich ist .data().

Ihr Filter würde funktionieren, aber Sie müssen bei übereinstimmenden Objekten in der Funktion, die an den Filter übergeben wird, true zurückgeben, damit er sie erfasst.

var $previous = $('.navlink').filter(function() { 
  return $(this).data("selected") == true 
});

Bitte beachten Sie, dass dies nicht mehr die einzige Möglichkeit ist, StefanoP hat Alternativen bereitgestellt

– Nathan Koop

25. Februar 2013 um 20:25 Uhr
@NathanKoop, nicht ganz. Siehe meinen Kommentar zu seiner Antwort.

– Bryan Downing

25. Februar 2013 um 22:26 Uhr
Für diejenigen, die ein Datenattribut verwenden, um ein ansonsten nicht auffindbares Element (ID weniger Divs usw.) an einer beliebigen Stelle im Dokument zu finden: $("*").filter(function() { return $(this).data("DATA IDENTIFIER HERE") == DATA VALUE HERE; });

– Tschallacka

20. Juni 2013 um 13:37 Uhr
dies ist nicht “unordentlich” – dies ist die einzige sichere Möglichkeit, nach beliebigen Begriffen zu filtern, ohne dass Sie diese Werte “escapen” müssen, um sicherzustellen, dass die Verkettung des Suchbegriffs mit dem Rest des Selektors keinen illegalen Selektor erstellt.

– Alnitak

24. Dezember 2018 um 11:25 Uhr

StefanoP

Nur fürs Protokoll, Sie kann Daten mit jquery filtern (diese Frage ist ziemlich alt und jQuery hat sich seitdem weiterentwickelt, daher ist es richtig, auch diese Lösung zu schreiben):

$('.navlink[data-selected="true"]');

oder besser (für die Leistung):

$('.navlink').filter('[data-selected="true"]');

oder, wenn Sie alle Elemente mit erhalten möchten data-selected einstellen:

$('[data-selected]')

Notiz dass diese Methode nur mit Daten funktioniert, die über HTML-Attribute gesetzt wurden. Wenn Sie Daten mit einstellen oder ändern .data() aufrufen, funktioniert diese Methode nicht mehr.

Wenn Sie die niedrige Stimmenanzahl für diese Antwort erschreckt, ist dies die akzeptierte Antwort mit mehr als 100 Stimmen für eine praktisch identische Frage stackoverflow.com/questions/4146502

– Simon_Weaver

27. Dezember 2012 um 2:57 Uhr
-1 Dies funktioniert nicht, wenn Daten mit gesetzt werden .data() Methode statt a data- Attribut. Siehe diese Geige: jsfiddle.net/bryandowning/tySWC – Auch die .find() -Methode sucht nach untergeordneten Elementen des vorhergehenden Selektors. In dem angegebenen Beispiel data-selected ist ein Attribut von .navlinkkein Kind von .navlink. Ebenfalls, $('div p') und $('div').find('p') sind im Wesentlichen gleichwertig. Verwenden .find() scheint aufgrund des zusätzlichen Funktionsaufrufs langsamer zu sein (obwohl ich mir dessen nicht sicher bin). Bitte korrigieren Sie mich, wenn ich in irgendetwas falsch liege (ich wünschte wirklich, diese Methode würde funktionieren).

– Bryan Downing

25. Februar 2013 um 22:24 Uhr
ein paar dinge: 1) du hast recht, dass das nicht funktioniert, wenn du daten mit setzt .data(), da jQuery das DOM durchsucht, habe ich es für diejenigen (wie mich) gepostet, die aus anderen Gründen zu dieser Frage gekommen sind; 2) richtig, .find() durchsucht die Kinder, also ist es in diesem Beispiel falsch; 3) Sie liegen falsch, sie sind nicht gleichwertig, da jQuery von rechts nach links sucht, siehe jonraasch.com/blog/…

– StefanoP

28. Februar 2013 um 8:30 Uhr
Stimmen Sie dafür ab $('[data-selected]') es hat mir für so etwas geholfen $('ul.categories a[data-categories_id]').click(......);

– Lukas Cousins

21. Januar 2015 um 17:19 Uhr
Außerdem scheint es so, als ob, wenn Sie das Datenattribut mit .attr aktualisieren, der Wert nicht aktualisiert wird, wenn Sie es mit .data abrufen. Seien Sie also vorsichtig, wenn Sie die beiden mischen

– Fabio Lolli

28. Juni 2017 um 12:22 Uhr

mpen

Wir können ein Plugin ziemlich einfach erstellen:

$.fn.filterData = function(key, value) {
    return this.filter(function() {
        return $(this).data(key) == value;
    });
};

Verwendung (Aktivieren eines Optionsfelds):

$('input[name=location_id]').filterData('my-data','data-val').prop('checked',true);

Was meinen Sie Plugin-Methode Andernfalls ist dies dasselbe wie die akzeptierte Antwort …

– jave.web

9. Mai 2018 um 19:25 Uhr
@jave.web In der Tat. Aber nicht jeder weiß, wie man daraus ein Plugin macht. Aktualisierte Wortwahl.

– mp

9. Mai 2018 um 20:40 Uhr
Versteh mich nicht falsch, deine Antwort ist großartig, aber die Worte hier sind sehr wichtig, danke für das Update 🙂

– jave.web

11. Mai 2018 um 20:00 Uhr

Thomas

Zwei Dinge sind mir aufgefallen (sie können jedoch Fehler sein, als Sie es aufgeschrieben haben).

Sie haben im ersten Beispiel einen Punkt übersehen ( $('.navlink').click )
Damit der Filter funktioniert, müssen Sie einen Wert zurückgeben ( return $(this).data("selected")==true )

Klingt nach mehr Arbeit als es wert ist.

1) Warum nicht einfach eine einzige JavaScript-Variable haben, die einen Verweis auf das aktuell ausgewählte element\jQuery-Objekt speichert.

2) Warum fügen Sie dem aktuell ausgewählten Element nicht eine Klasse hinzu? Dann könnten Sie das DOM nach der Klasse “.active” oder so etwas abfragen.

Ja, aber wie gesagt, ich wusste, dass es andere Wege gibt, es zu erreichen. Ich war nur festgefahren, ob es über data() gefiltert werden konnte und warum filter() bei mir nicht funktionierte. Trotzdem danke.

– Benutzer113716

17. Juni 2009 um 21:39 Uhr
Es tut uns leid. Ich habe diesen Teil Ihrer Frage übersehen.

– Bryan Migliorisi

18. Juni 2009 um 13:44 Uhr

Ja, aber wie gesagt, ich wusste, dass es andere Wege gibt, es zu erreichen. Ich war nur festgefahren, ob es über data() gefiltert werden konnte und warum filter() bei mir nicht funktionierte. Trotzdem danke.

– Benutzer113716

17. Juni 2009 um 21:39 Uhr
Es tut uns leid. Ich habe diesen Teil Ihrer Frage übersehen.

– Bryan Migliorisi

18. Juni 2009 um 13:44 Uhr

13120700cookie-checkFilterelement basierend auf .data() Schlüssel/Wert

#Abfrage #Filter