我想知道是否存在这样的东西,没有过滤器(我正在寻找快捷方式),使用jQuery的集合或本机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文档的东西。
没有这样的内置方法,但您可以轻松编写一个辅助函数,您可以传递一个与另一个选择器连接的选择器数组:
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">
您可以在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">