代码之家 › 专栏 › 技术社区 › Hello Universe

合并要集体引用的两个html元素对象

jquery javascript

Hello Universe · 技术社区 · 7 年前

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

  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 回复 | 直到 7 年前

Muhammad Omer Aslam 7 年前

如果我理解正确的话,你想重复使用 bed2 ,和 labelTwo 变量就像您可以使用它们所引用的两个元素一样 $(".bed2, label-two") 是的。

是的,我想你要找的是 $.merge 这可以帮助您将两个html元素对象合并到一个html元素数组中,该数组可以对下面的两个元素进行集体引用。

$.merge(bed2,labelTwo).css({'border':'1px solid red'});

您可以在控制台中看到using语句 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>

Muhammad Omer Aslam 7 年前

你就快到了。改变 , 到 :

电流为:

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

gforce301 7 年前

是的,有可能,只是有点棘手。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>