querySelectorAll с несколькими условиями

Question 1

Можно ли выполнить поиск по querySelectorAll, используя несколько несвязанных условий? Если да, то как? И как указать, являются ли это критериями И или ИЛИ?

Например:

Как найти все формы s, p s и легенды с помощью одного вызова querySelectorAll ? Возможный?

Question 2

Можно ли выполнить поиск, querySelectorAllиспользуя несколько не связанных между собой условий?

Да, потому что querySelectorAllпринимает полные селекторы CSS, а в CSS есть концепция групп селекторов , которая позволяет указать более одного несвязанного селектора. Например:

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

... вернет список, содержащий любой элемент, который является form или p или legend .

У CSS есть и другая концепция: ограничение на основе большего количества критериев. Вы просто комбинируете несколько аспектов селектора. Например:

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

... вернет список всех divэлементов, которые также ( и ) имеют класс foo, игнорируя другие divэлементы.

Вы, конечно, можете комбинировать их:

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

... что означает «Включите любой divэлемент, который также имеет fooкласс, любой pэлемент, который также имеет barкласс, и любой legendэлемент, который также находится внутри div.»

Question 3

Согласно документации, как и с любым селектором CSS, вы можете указать столько условий, сколько захотите, и они будут обрабатываться как логическое «ИЛИ».

В этом примере возвращается список всех элементов div в документе с классом «note» или «alert»:

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

источник: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Между тем, чтобы получить функциональность «И», вы можете, например, просто использовать селектор с несколькими атрибутами, как говорит jquery:

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

напр. "input[id][name$='man']" указывает как идентификатор, так и имя элемента, и оба условия должны быть выполнены. Для классов так же очевидно, как " .class1.class2" требовать объект двух классов.

Все возможные комбинации того и другого допустимы, поэтому вы можете легко получить эквивалент более сложных выражений «ИЛИ» и «И».

Question 4

Да, querySelectorAllесть группа селекторов :

form, p, legend

Question 5

С чистым JavaScript вы можете сделать это (например, SQL) и все, что вам нужно, в основном:

<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>

Развернуть фрагмент

Answer 1

105

Можно ли выполнить поиск по querySelectorAll, используя несколько несвязанных условий? Если да, то как? И как указать, являются ли это критериями И или ИЛИ?

Например:

Как найти все формы s, p s и легенды с помощью одного вызова querySelectorAll ? Возможный?

javascript Алан Коромано
источник

Я не совсем понимаю, что вы подразумеваете под « критериями И или ИЛИ ». Вы можете дать этому пример?

Берги

4

В документации это рассматривается в первом примере .

Энди

Answer 2

Я не совсем понимаю, что вы подразумеваете под « критериями И или ИЛИ ». Вы можете дать этому пример?

Берги

Answer 3

4

В документации это рассматривается в первом примере .

Энди

Answer 4

Можно ли выполнить поиск, querySelectorAllиспользуя несколько не связанных между собой условий?

Да, потому что querySelectorAllпринимает полные селекторы CSS, а в CSS есть концепция групп селекторов , которая позволяет указать более одного несвязанного селектора. Например:

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

... вернет список, содержащий любой элемент, который является form или p или legend .

У CSS есть и другая концепция: ограничение на основе большего количества критериев. Вы просто комбинируете несколько аспектов селектора. Например:

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

... вернет список всех divэлементов, которые также ( и ) имеют класс foo, игнорируя другие divэлементы.

Вы, конечно, можете комбинировать их:

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

... что означает «Включите любой divэлемент, который также имеет fooкласс, любой pэлемент, который также имеет barкласс, и любой legendэлемент, который также находится внутри div.»

Answer 5

есть ли возможность использовать один класс из document.querySelectorAll, например у меня var hotspots = document.querySelectorAll (". clickMapItem.text, .clickMapItem.multiImageText"); var i; для (я = 0; я <hotspots.length; я ++) {горячие точки [я] .style.display = "нет"; } Мне нужно использовать оператор if else, как проверить, является ли это классом, не отображающим ничего или что-то еще. if (hotspots [0 или 1] .style.display == "none") не работает.

Mile Mijatović

Answer 6

1

@MileMijatovic: Вопросы следует размещать как вопросы, а не как комментарии. Но см .: stackoverflow.com/questions/25238153/…

TJ Crowder

Answer 7

Хорошо, а в целом можно ли сделать то, о чем я просил? Ссылка не помогла

Миля Миятович

Answer 8

Концепция групп селекторов работала у меня еще в 2018 году ... спасибо за то, что поделился

Эрик Хепперле - CodeSlayer2010

Answer 9

Согласно документации, как и с любым селектором CSS, вы можете указать столько условий, сколько захотите, и они будут обрабатываться как логическое «ИЛИ».

В этом примере возвращается список всех элементов div в документе с классом «note» или «alert»:

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

источник: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll

Между тем, чтобы получить функциональность «И», вы можете, например, просто использовать селектор с несколькими атрибутами, как говорит jquery:

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

напр. "input[id][name$='man']" указывает как идентификатор, так и имя элемента, и оба условия должны быть выполнены. Для классов так же очевидно, как " .class1.class2" требовать объект двух классов.

Все возможные комбинации того и другого допустимы, поэтому вы можете легко получить эквивалент более сложных выражений «ИЛИ» и «И».

Answer 10

2

Хотя сам метод верен, нет необходимости ссылаться на jQuery для объяснения CSS (тем более, что вопрос OP ограничен JavaScript).

Chaya Cooper

Answer 11

3

Да, querySelectorAllесть группа селекторов :

form, p, legend

Берги
источник

Answer 12

С чистым JavaScript вы можете сделать это (например, SQL) и все, что вам нужно, в основном:

<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>

Развернуть фрагмент

Answer 13

1

это на самом деле не отвечает на вопрос, особенно на ту how to specify whether those are AND or OR criteriaчасть, см. принятый ответ

Мейдан Алон

querySelectorAll с несколькими условиями

Ответы: