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

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

3

Ja, querySelectorAllnimmt eine Gruppe von Selektoren :

form, p, legend

— Bergi
quelle

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