querySelectorAll mit mehreren Bedingungen

94

Ist es möglich, eine Suche mit querySelectorAll unter Verwendung mehrerer nicht zusammenhängender Bedingungen durchzuführen? Wenn ja wie? Und wie kann man angeben, ob dies UND- oder ODER-Kriterien sind?

Beispielsweise:

Wie alle finden Form s, p s und Legende s mit einem einzigen querySelectorAll Anruf? Möglich?

javascript Alan Coromano
quelle
Ich bin mir nicht sicher, was Sie unter " UND- oder ODER-Kriterien " verstehen . Können Sie dafür ein Beispiel geben?
Bergi
4
Die Dokumentation behandelt dies im ersten Beispiel .
Andy

Antworten:

161

Ist es möglich, eine Suche unter querySelectorAllVerwendung mehrerer nicht zusammenhängender Bedingungen durchzuführen ?

Ja, da querySelectorAllvollständige CSS-Selektoren akzeptiert werden und CSS das Konzept von Selektorgruppen hat , mit denen Sie mehr als einen nicht verwandten Selektor angeben können. Zum Beispiel:

var list = document.querySelectorAll("form, p, legend");

... gibt eine Liste zurück, die ein Element enthält, das ein form oder p oder ist legend .

CSS hat auch das andere Konzept: Einschränkung basierend auf mehr Kriterien. Sie kombinieren einfach mehrere Aspekte eines Selektors. Zum Beispiel:

var list = document.querySelectorAll("div.foo");

... gibt eine Liste aller divElemente zurück, die auch ( und ) die Klasse haben foo, wobei andere divElemente ignoriert werden.

Sie können sie natürlich kombinieren:

var list = document.querySelectorAll("div.foo, p.bar, div legend");

... was bedeutet "Schließen Sie jedes divElement ein, das auch die fooKlasse enthält, jedes pElement, das auch die barKlasse enthält, und jedes legendElement, das sich ebenfalls in a befindet div."

TJ Crowder
quelle
Gibt es eine Möglichkeit, eine einzelne Klasse aus document.querySelectorAll zu verwenden, zum Beispiel habe ich var hotspots = document.querySelectorAll (". clickMapItem.text, .clickMapItem.multiImageText"); var i; für (i = 0; i <hotspots.length; i ++) {hotspots [i] .style.display = "none"; } Ich muss die if else-Anweisung verwenden, um zu überprüfen, ob es sich um eine Klassenanzeige handelt, die keine oder etwas anderes anzeigt. if (hotspots [0 oder 1] .style.display == "none") funktioniert nicht.
Meile Mijatović
1
@MileMijatovic: Fragen sollten eher als Fragen als als Kommentare gepostet werden. Aber siehe: stackoverflow.com/questions/25238153/…
TJ Crowder
Ok, aber im Allgemeinen ist es möglich zu tun, was ich gefragt habe? Der Link hat nicht geholfen
Mile Mijatović
Das Konzept der
Auswahlgruppen
15

Gemäß der Dokumentation können Sie wie bei jedem CSS-Selektor so viele Bedingungen angeben, wie Sie möchten, und diese werden als logisches "ODER" behandelt.

In diesem Beispiel wird eine Liste aller div-Elemente im Dokument mit der Klasse "note" oder "alert" zurückgegeben:

var matches = document.querySelectorAll("div.note, div.alert");

Quelle: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Um die 'UND'-Funktionalität zu erhalten, können Sie zum Beispiel einfach einen Multiattribut-Selektor verwenden, wie jquery sagt:

https://api.jquery.com/multiple-attribute-selector/

Ex. "input[id][name$='man']" Gibt sowohl die ID als auch den Namen des Elements an und beide Bedingungen müssen erfüllt sein. Für Klassen ist es so offensichtlich wie " .class1.class2", ein Objekt von 2 Klassen zu benötigen.

Alle möglichen Kombinationen von beiden sind gültig, sodass Sie leicht gleichwertigere Ausdrücke für 'ODER' und 'UND' erhalten können.

mikus
quelle
2
Obwohl die Methode selbst korrekt ist, muss zur Erklärung von CSS nicht auf jQuery verwiesen werden (insbesondere, da die Frage des OP auf JavaScript beschränkt ist).
Chaya Cooper
0

Mit reinem JavaScript können Sie dies tun (z. B. SQL) und alles, was Sie brauchen, im Grunde:

<html>

<body>

<input type='button' value='F3' class="c2" id="btn_1">
<input type='button' value='F3' class="c3" id="btn_2">
<input type='button' value='F1' class="c2" id="btn_3">

<input type='submit' value='F2' class="c1" id="btn_4">
<input type='submit' value='F1' class="c3" id="btn_5">
<input type='submit' value='F2' class="c1" id="btn_6">

<br/>
<br/>

<button onclick="myFunction()">Try it</button>

<script>
    function myFunction() 
    {
        var arrFiltered = document.querySelectorAll('input[value=F2][type=submit][class=c1]');

            arrFiltered.forEach(function (el)
            {                
                var node = document.createElement("p");
                
                node.innerHTML = el.getAttribute('id');

                window.document.body.appendChild(node);
            });
        }
    </script>

</body>

</html>
Erweitern Sie das Snippet

Alejandro DV
quelle
1
Dies beantwortet nicht wirklich die Frage, speziell den how to specify whether those are AND or OR criteriaTeil, siehe akzeptierte Antwort
Meidan Alon