JQuery ИЛИ Селектор?

291

Мне интересно, есть ли способ иметь логику "ИЛИ" в селекторах jQuery. Например, я знаю, что элемент является потомком элемента с классом classA или classB, и я хочу сделать что-то вроде elem.parents('.classA or .classB'). Предоставляет ли jQuery такую ​​функциональность?

Теги:
jquery-selectors

5 ответов

424
Лучший ответ

Используйте запятую.

'.classA, .classB'

Вы можете опустить пробел.

  • 41
    Следует отметить, что на самом деле это не «или» селектор, а скорее как несколько селекторов в одном.
  • 46
    @alex: но он не выберет один и тот же элемент дважды (что сделал бы оператор конкатенации). Это действительно селектор ИЛИ, потому что он создает СОЮЗ из двух или более множеств (тогда как И является пересечением).
Показать ещё 5 комментариев
56

Использование запятой может быть недостаточно, если у вас есть несколько объектов jQuery, которые необходимо объединить.

Метод . add() добавляет выбранные элементы в результирующий набор:

// classA OR classB
jQuery('.classA').add('.classB');

Это более подробный, чем '.classA, .classB', но позволяет создавать более сложные селектора, такие как:

// (classA which has <p> descendant) OR (<div> ancestors of classB)
jQuery('.classA').has('p').add(jQuery('.classB').parents('div'));
15

Я написал невероятно простой (5 строк кода) плагин для этой функции:

http://byrichardpowell.github.com/jquery-or/

Это позволяет вам эффективно сказать "получить этот элемент, или если этот элемент не существует, используйте этот элемент". Например:

$( '#doesntExist' ).or( '#exists' );

В то время как принятый ответ обеспечивает аналогичную функциональность, если оба селектора (до и после запятой) существуют, оба селектора будут возвращены.

Надеюсь, это окажется полезным для всех, кто может попасть на эту страницу через google.

  • 4
    Это не то, как работает логический оператор OR. Если оба селектора возвращают элементы, оператор OR должен возвращать все из них, а не только элементы первого селектора. Ваш плагин должен быть назван "ifEmpty" или "else" или что-то в этом роде.
  • 12
    @Alp: рассмотрим поведение "a" || "b" против null || "b" в ванили JS. Если мы применяем такое же поведение здесь, $(a).or(b) должен вернуть $(a) если он существует, в противном случае он должен вернуть $(b) . Я не думаю, что с этой номенклатурой что-то не так, поскольку "или" соответствует поведению JS "||" (или) оператор.
Показать ещё 3 комментария
13

Если вы хотите использовать стандартную конструкцию element = element1 || element2, где JavaScript вернет первую правду, вы можете сделать именно это:

element = $('#someParentElement .somethingToBeFound') || $('#someParentElement .somethingElseToBeFound');

который вернет первый найденный элемент. Но лучше было бы, вероятно, использовать конструкцию запятой jQuery селектора (которая возвращает массив найденных элементов) следующим образом:

element = $('#someParentElement').find('.somethingToBeFound, .somethingElseToBeFound')[0];

который вернет первый найденный элемент.

Я использую это время от времени, чтобы найти активный элемент в списке или какой-либо элемент по умолчанию, если нет активного элемента. Например:

element = $('ul#someList').find('li.active, li:first')[0] 

который вернет любой li с классом active или, если его не будет, просто вернет последний li.

Либо все будет работать. Существуют потенциальные штрафы за производительность, хотя, поскольку || прекратит обработку, как только найдет что-то правдоподобное, в то время как массивный подход попытается найти все элементы, даже если он уже нашел его. Опять же, используя || Конструкция потенциально может иметь проблемы с производительностью, если она должна пройти через несколько селекторов, прежде чем найти тот, который она вернет, потому что она должна вызывать основной объект jQuery для каждого из них (я действительно не знаю, является ли это ударом производительности или нет, это просто логично, что это может быть). В общем, я использую подход массива, когда селектор является довольно длинной строкой.

0

Daniel A. White Solution отлично подходит для занятий.

У меня возникла ситуация, когда мне приходилось находить поля ввода, такие как donee_1_card, где 1 - индекс.

Мое решение было

$("input[name^='donee']" && "input[name*='card']")

Хотя я не уверен, насколько это оптимально.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню