Ярлык, чтобы получить элементы DOM с несколькими селекторами и одним классом?

Question

Я хотел бы знать, существует ли что-то подобное, без фильтра (я ищу ярлык), с наборами jQuery или native querySelectorAll:

$('(select|input[type="text"]|textarea).myCssClass')

Мне нужны все элементы select (s), input-text (s) и textarea (s) с классом myCssClass css.

Также я безуспешно пытался:

$('(select, input[type="text"], textarea).myCssClass')

Обратите внимание, что я уже знаю что-то вроде:

$('form#myForm')
  .find('select, input[type="text"], textarea')
  .filter('.myCssClass')
  .each(....)

Хотел ярлык - что-то, чего бы я не мог прочитать в документации по jQuery.

Answer 1

Нет такого встроенного метода, но вы можете легко написать вспомогательную функцию, в которую можно передать массив селекторов, которые объединяются с другим селектором:

const combineSelectors = (applyToAll, arr) => arr
  .map(str => str + applyToAll)
  .join(',');
$(combineSelectors('.myCssClass', ['select', 'input[type="text"]', 'textarea']))
  .each(function() {
    $(this).css('background-color', 'blue');
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea class="myCssClass"></textarea><br>
<input><br>
<input type="text"><br>
<input type="text" class="myCssClass">

Answer 2

Вы можете создать пользовательскую функцию в javascript, которая будет принимать массив элементов и класса.Затем выполните итерацию этого массива и используйте document.querySelectorAll, чтобы получить все элементы из dom с соответствующим классом.document.querySelectorAll даст коллекцию.Вы можете снова выполнить итерацию для каждого элемента и добавить к нему класс

let className = 'myCssClass';
let elm = ['input', 'textarea'];

function addClaz(arr, className) {
  arr.forEach(function(elem) {
    document.querySelectorAll(`${elem}[class='${className}'`).forEach(function(em) {
      em.classList.add('test')
    })
  })
}
addClaz(elm, className)

.test {
  background: green;
}

<textarea class="myCssClass"></textarea><br>
<input><br>
<input type="text"><br>
<input type="text" class="myCssClass">