blocks|key|4144884|text|你就快到了。将,更改为:|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4144885|当前是：|4144886|$('.bed2,+.label-two').css('background-color',+'yellow');|code-block|syntax|javascript|4144887|更改为：|4144888|$('.bed2,+.label-two').css({'background-color':+'yellow'});|4144889|示例如下：|4144890|​|4144891|$('.bed2,+.label-two').css({'background-color':+'yellow'});|4144892|<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>|4144893|4144894|entityMap^0|7|1|B|1|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|18|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|19|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1A|8|@]|D|@]|E|$]]|$1|S|3|T|5|6|7|1B|8|@]|D|@]|E|$]]|$1|U|3|V|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|W|3|X|5|J|7|1D|8|@]|D|@]|E|$K|L]]|$1|Y|3|T|5|6|7|1E|8|@]|D|@]|E|$]]|$1|Z|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|10|$]]

<p>You were almost there. Change <code>,</code> to <code>:</code></p>

<p>Current is:</p>

<pre><code>$('.bed2, .label-two').css('background-color', 'yellow');
</code></pre>

<p>Change to:</p>

<pre><code>$('.bed2, .label-two').css({'background-color': 'yellow'});
</code></pre>

<p>Example here:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$('.bed2, .label-two').css({'background-color': 'yellow'});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="bed2"&gt;
  Hello
&lt;/div&gt;

&lt;div class="label-two"&gt;
  World
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4144974|text|是的，这是可能的，只是有点棘手。jQuery可以接受一个元素数组。.get()以数组的形式返回选择器找到的元素。连接数组，然后就可以了。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4144975|添加了使用SLaks+answer的示例。|4144976|​|4144977|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');
});|code-block|syntax|javascript|4144978|.bed2,+.label-two+{
++height:+10px;
++border:+1px+solid+black;
}|4144979|<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>|4144980|4144981|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/get/#get2^0|X|6|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|6|7|13|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|14|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|15|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|J|7|16|8|@]|9|@]|C|$K|L]]|$1|O|3|P|5|J|7|17|8|@]|9|@]|C|$K|L]]|$1|Q|3|G|5|6|7|18|8|@]|9|@]|C|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|C|$]]]|S|$T|$5|U|V|W|C|$X|Y]]]]

<p>Yes it's possible, it's just a little tricky. A jQuery can take an array of elements. <a href="https://api.jquery.com/get/#get2" rel="nofollow noreferrer">.get()</a> returns the elements found by a selector as an array. Concat the arrays and there you go.</p>

<p>Added an example using SLaks answer.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.bed2, .label-two {
  height: 10px;
  border: 1px solid black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;div class="bed2"&gt;&lt;/div&gt;
&lt;div class="label-two"&gt;&lt;/div&gt;
&lt;button id="theButton"&gt;Click green&lt;/button&gt;
&lt;button id="theButton2"&gt;Click blue&lt;/button&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4145398|text|如果我理解正确的话，您希望重用bed2和labelTwo变量，就像您可以像$(".bed2,+label-two")一样使用它们引用的两个元素一样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4145399|是的，我认为你正在寻找的是$.merge，它可以帮助你将两个HTML元素对象合并成一个HTML元素数组，可以为这两个元素共同引用，如下所示。|4145400|$.merge(bed2,labelTwo).css({'border':'1px+solid+red'});|code-block|syntax|javascript|4145401|您可以在控制台中使用语句console.log($(".bed2,.label-two"),$.merge(bed2,labelTwo));查看它们是否是标识符，这两种情况下都只返回html元素的集合。|4145402|查看演示|4145403|​|4145404|$(document).ready(function()+{

++var+bed2+=+$(".bed2");
++var+label2+=+$(".label-two");

++$('button').on('click',+function()+{
++++$.merge(bed2,+label2).css({
++++++'background':+'#f8f8f8',
++++++'border':+'1px+solid+red',
++++});

++})

});|4145405|<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>|4145406|4145407|entityMap|0|LINK|mutability|MUTABLE|url|https://api.jquery.com/jquery.merge/^0|F|4|K|8|11|L|0|D|7|D|7|0|0|0|C|1M|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]|$9|1A|A|1B|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1C|8|@$9|1D|A|1E|B|C]]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|H|3|I|5|J|7|1I|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|1M|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1N|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1O|8|@]|D|@]|E|$K|L]]|$1|U|3|V|5|J|7|1P|8|@]|D|@]|E|$K|L]]|$1|W|3|R|5|6|7|1Q|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1R|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]]]

<p>If I understand correctly you want to reuse the <code>bed2</code>, and <code>labelTwo</code> variables just like you can use both of the elements that they are referring like <code>$(".bed2, label-two")</code>.</p>

<p>Yes, I think what you are looking for is <a href="https://api.jquery.com/jquery.merge/" rel="nofollow noreferrer"><code>$.merge</code></a> which can help you merge both HTML elements object into an array of HTML elements which can be referenced collectively for both of those elements like below.</p>

<pre><code>$.merge(bed2,labelTwo).css({'border':'1px solid red'});
</code></pre>

<p>you can see in the console using statement <code>console.log($(".bed2,.label-two"),$.merge(bed2,labelTwo));</code> to see if they are identicle or not , its just the collection of html elements that is returned in both cases.</p>

<p>see a demo</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {

  var bed2 = $(".bed2");
  var label2 = $(".label-two");

  $('button').on('click', function() {
    $.merge(bed2, label2).css({
      'background': '#f8f8f8',
      'border': '1px solid red',
    });

  })

});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="bed2"&gt;
  BED
&lt;/div&gt;

&lt;div class="label-two"&gt;
  LABEL
&lt;/div&gt;

&lt;button&gt;click me to add some css to both divs above atonce&lt;/button&gt;</code></pre>
</div>
</div>
</p>


<p>Let's say I have variables like below. I am using this variable in many different places.</p>

<pre><code>  var bed2 = $('.bed2');
var labelTwo = $('.label-two');
</code></pre>

<p>Now, let's say I need to use it as below</p>

<pre><code>$('.bed2, .label-two').css({'background-color': 'yellow'});
</code></pre>

<p>Definitely, I can do like below</p>

<pre><code>bed2.css('background-color', 'yellow');
labelTwo.css('background-color', 'yellow');
</code></pre>

<p>However, it feels like writting those two lines above feels yucky. Can those two lines be combined into one something like</p>

<pre><code>bed2,labelTwo.css('background-color', 'yellow');
</code></pre>

<p>My question is about combining the variables <code>bed2</code>,<code>labelTwo</code> into one line.</p>


Merge two HTML element objects to be referenced collectively

jQuery

假设我有下面这样的变量。我在许多不同的地方使用这个变量。  var bed2 = $('.bed2');var labelTwo = $('.label-two');现在，假设我需要使用它，如下所示$('.bed2, .label-two').css({'background-color': 'yellow'});当然...

问合并两个要整体引用的HTML元素对象
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问合并两个要整体引用的HTML元素对象EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问合并两个要整体引用的HTML元素对象
EN