如何合并两个要集体引用的HTML元素对象?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (65)

假设我有如下变量。我在许多不同的地方使用这个变量。

  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');

我的问题是如何组合变量bed2labelTwo变成一行。

提问于
用户回答回答于

如果我正确理解,你希望重用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>

用户回答回答于

jQuery可以接受一个元素数组。Get()将选择器找到的元素作为数组返回,把数组连在一起。

添加了一个使用SLaks答案的例子。

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>

扫码关注云+社区

领取腾讯云代金券