Question

我想知道是否存在这样的东西，没有过滤器（我在寻找快捷方式），带有 jQuery 的设置或本机 querySelectorAll：

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

我希望所有带有myCssClass css类的select，输入文本和textarea。

我也尝试失败了：

$('(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">

获得带有多个选择器和一个类的dom元素的快捷方式？

2 个答案: