合并两个要整体引用的HTML元素对象
合并两个要整体引用的HTML元素对象
提问于 2018-07-04 08:31:48
假设我有下面这样的变量。我在许多不同的地方使用这个变量。
var bed2 = $('.bed2');
var labelTwo = $('.label-two');现在，假设我需要使用它，如下所示
$('.bed2, .label-two').css({'background-color': 'yellow'});当然，我可以像下面这样做
bed2.css('background-color', 'yellow');
labelTwo.css('background-color', 'yellow');然而，感觉上面的这两行写起来很糟糕。这两条线可以合并成一条线吗？
bed2,labelTwo.css('background-color', 'yellow');我的问题是关于将变量bed2和labelTwo组合到一行中。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-07-04 09:16:14
如果我理解正确的话，您希望重用bed2和labelTwo变量，就像您可以像$(".bed2, label-two")一样使用它们引用的两个元素一样。
是的，我认为你正在寻找的是$.merge，它可以帮助你将两个HTML元素对象合并成一个HTML元素数组，可以为这两个元素共同引用，如下所示。
$.merge(bed2,labelTwo).css({'border':'1px solid red'});您可以在控制台中使用语句console.log($(".bed2,.label-two"),$.merge(bed2,labelTwo));查看它们是否是标识符，这两种情况下都只返回html元素的集合。
查看演示
$(document).ready(function() {
var bed2 = $(".bed2");
var label2 = $(".label-two");
$('button').on('click', function() {
$.merge(bed2, label2).css({
'background': '#f8f8f8',
'border': '1px solid red',
});
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bed2">
BED
</div>
<div class="label-two">
LABEL
</div>
<button>click me to add some css to both divs above atonce</button>
Stack Overflow用户
发布于 2018-07-04 08:44:26
你就快到了。将,更改为:
当前是：
$('.bed2, .label-two').css('background-color', 'yellow');更改为：
$('.bed2, .label-two').css({'background-color': 'yellow'});示例如下：
$('.bed2, .label-two').css({'background-color': 'yellow'});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bed2">
Hello
</div>
<div class="label-two">
World
</div>
Stack Overflow用户
发布于 2018-07-04 08:52:45
是的，这是可能的，只是有点棘手。jQuery可以接受一个元素数组。.get()以数组的形式返回选择器找到的元素。连接数组，然后就可以了。
添加了使用SLaks answer的示例。
var bed2 = $('.bed2');
var labelTwo = $('.label-two');
bed2.css('background-color', 'yellow');
labelTwo.css('background-color', 'yellow');
$('#theButton').click(function() {
$(bed2.get().concat(labelTwo.get())).css('background-color', 'green');
});
$('#theButton2').click(function() {
bed2.add(labelTwo).css('background-color', 'blue');
});.bed2, .label-two {
height: 10px;
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bed2"></div>
<div class="label-two"></div>
<button id="theButton">Click green</button>
<button id="theButton2">Click blue</button>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51164387
复制相关文章
相似问题