JQuery -Filterobjekte nach Datenattributwert

In diesem Artikel wird beschrieben, wie JQuery verwendet wird, um Elemente basierend auf Datenattributwerten zu filtern. Der folgende Code -Snippet wählt alle Div -Elemente mit IDs aus, die mit "proto_" und dem Datenattribut "Status" Wert "geöffnet" sind:

<code class="language-javascript">var $el = $('div[id^=proto_]').filter(function() {
    return ($(this).data("state") == "open");
});
console.log($el);</code>

jsfiddle Demo

optimierte Version

Vielen Dank an Vlad für die Optimierungslösung:

<code class="language-javascript">var $el = $('div[id^=proto_]').filter('div[data-state=open]').css('color','red');</code>

JSFIDDLE optimierte Version Demo

FAQ für JQuery -Filterobjekte nach Datenattributen

Wie kann ich JQuery verwenden, um Objekte basierend auf Datenattributen zu filtern?

jQuery bietet leistungsstarke Möglichkeiten zum Manipulieren und Filtern von Objekten basierend auf Datenattributen. Dies kann unter Verwendung der .filter() -Funktion von JQuery erreicht werden. Die Funktion .filter() ermöglicht das Angeben einer Funktion als Parameter, die wahr oder false zurückgeben sollte. Wenn die Funktion true, wird das Element in die gefilterte Sammlung aufgenommen. Hier ist ein grundlegendes Beispiel:

<code class="language-javascript">$('div').filter(function() {
  return $(this).data('key') === 'value';
});</code>

Dieses Beispiel filtert alle Div -Elemente mit einem Wert von "Schlüssel" für Datenattribute.

Was ist der Unterschied zwischen

und .filter() in .find()?

.filter() und .find() sind beide JQuery -Methoden, mit denen der Suchbereich von Elementen in JQuery -Objekten eingeschlossen ist. Ihre Hauptunterschiede sind: .filter() verengt die Menge der passenden Elemente an Elemente, die den Funktionstest übereinstimmen oder bestehen Filter. .find()

Kann ich in der Funktion

mehrere Datenattribute verwenden? .filter()

Ja. Fügen Sie der Funktion einfach weitere Bedingungen hinzu. Zum Beispiel:

<code class="language-javascript">$('div').filter(function() {
  return $(this).data('key1') === 'value1' && $(this).data('key2') === 'value2';
});</code>

Dieses Beispiel filtert alle Div -Elemente mit einem Wert von "KEY1" des Datenattributs "Wert1" und einem Wert von "KEY2" des Datenattributs "Wert2".

Wie filtert ich Elemente basierend auf Datenattributwerten, die eine bestimmte Zeichenfolge enthalten?

Sie können Attribut mit Selektoren

verwenden, um Elemente auszuwählen, deren Attributwert eine bestimmte Zeichenfolge enthält. Zum Beispiel: [name*="value"]

<code class="language-javascript">$('div[data-key*="value"]').filter(function() {
  // 您的代码
});</code>

Dieses Beispiel filtert alle Datenattribut "Schlüssel", die DIV -Elemente mit String -Wert "Wert" enthalten.

Kann

mit anderen jQuery -Methoden verwendet werden? .filter()

Ja. Beispielsweise können Sie

mit .filter() verwenden, um den Stil des Filterelements zu ändern: .css()

<code class="language-javascript">$('div').filter(function() {
  return $(this).data('key') === 'value';
}).css('color', 'red');</code>

Dieses Beispiel ändert die Textfarbe aller Divelemente mit dem "Schlüssel" von "Wert" in Rot.

Das obige ist der detaillierte Inhalt vonJQuery -Filterobjekte nach Datenattributwert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!