首页 > 解决方案 > 获取具有多个选择器和一个类的 dom 元素的快捷方式?

问题描述

我想知道这样的东西是否存在,没有过滤器(我正在寻找快捷方式),使用jQuery的集合或本机querySelectorAll :

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

我想要所有带有myCssClasscss 类的选择、输入文本和文本区域。

我也试过不成功:

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

请注意,我已经知道类似的事情:


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

想要的快捷方式——我会错过阅读 jQuery 文档的东西。

标签: javascriptjquerycssdom

解决方案


没有这样的内置方法,但您可以轻松编写一个辅助函数,您可以向该函数传递一个与另一个选择器连接的选择器数组:

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


推荐阅读