javascript 如何将Class添加到多个元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14630076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to addClass to multiple elements?
提问by MinisterZack
I'm using this bit of javascript to add a class to multiple elements. I trying to reference multiple divs and addClass to them. it Only works on the first one.
我正在使用这段 javascript 将一个类添加到多个元素。我试图引用多个 div 并向它们添加类。它只适用于第一个。
Javascript
Javascript
<script>
$(function(){
if ( $(window).width() < 230 ) {
$('#item1').addClass('col1'); //max-width 80px
}
else
if ( $(window).width() >= 230 && $(window).width() < 330 ) {
$('#item1').addClass('col2'); //max-width 180px
}
else
{
$('#item1').addClass('col3'); //max-width 280px
}
});
</script>
it's working if I only have one #item1 on the page but it doesn't seem to want to add the class to multiple items that exist in the same div id. I even tried adding the class to multiple items that exist in the same div class rather than id. Either one would be a good solution for mw if you can figure it out.
如果页面上只有一个 #item1 ，它就可以工作，但它似乎不想将类添加到同一 div id 中存在的多个项目中。我什至尝试将类添加到同一个 div 类中存在的多个项目而不是 id。如果你能弄清楚，任何一个都是 mw 的一个很好的解决方案。
My HTML code is
我的 HTML 代码是
<div id="item1" class="blue">
<label for="amount">Price range:</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
<div class="slider-range"></div>
</div>
<div id="item1" class="blue">
<label for="amount2">Price range:</label>
<input type="text" id="amount2" style="border:0; color:#f6931f; font-weight:bold;"/>
<div class="slider-range2"></div>
</div>
Been trying to figure this out for a few hours now so I thought I'd ask to see if anyone can point me in the right direction. Thanks in advance.
几个小时以来一直试图弄清楚这一点，所以我想我会问是否有人可以指出我正确的方向。提前致谢。
回答by Steve H.
IDs should be unique. Try adding a class instead, like "item":
ID 应该是唯一的。尝试添加一个类，例如“项目”：
<div class="blue item">
...etc...
</div>
Then in your JS:
然后在你的 JS 中：
$('.item').addClass('col1');
回答by techfoobar
Use classinstead of idfor the manipulation:
使用class代替id操作：
i.e.
IE
var newClass = '';
if ( $(window).width() < 230 ) {
newClass = 'col1';
}
else if ( $(window).width() >= 230 && $(window).width() < 330 ) {
newClass = 'col2';
}
else {
newClass = 'col3';
}
$('.blue').addClass(newClass); // will apply to all elements with class blue
回答by Danny
The reason why the class is getting added to only one div is because id's are supposed to be unique in the HTML. jQuery will only return the first matched item when using an id selector. You have three options
类只添加到一个 div 的原因是因为 id 在 HTML 中应该是唯一的。jQuery 只会在使用 id 选择器时返回第一个匹配项。你有三个选择
Option one: Instead of the id item1use a class itemand use the following selector
选项一：代替 iditem1使用类item并使用以下选择器
$('.item').addClass('col1');
Option two: Change the id on the second div to item2and use the following selector
选项二：将第二个 div 上的 id 更改为item2并使用以下选择器
$('#item1, #item2').addClass('col1');
Option three: Use the attribute selector (this is more of a hack)
选项三：使用属性选择器（这更像是一种技巧）
$('div[id="item1"]').addClass('col1');
回答by Ilyssis
Use class selectors instead of id:
使用类选择器而不是 id：
$('.toAdd').addClass('col3');
This will add class 'col3' to all elements wich have the class 'toAdd'.
这会将类“col3”添加到具有“toAdd”类的所有元素。
回答by Robert Fricke
Having multiple elements with the same id is not a valid syntax, and the id selector in jQuery $('#anyId')always return first item with that id, never multiple items.
具有相同 id 的多个元素不是有效的语法，jQuery 中的 id 选择器$('#anyId')总是返回具有该 id 的第一个项目，而不是多个项目。
use <div class="blue item">in your html and jQuery class selector $('.item')instead.
使用<div class="blue item">在你的HTML和jQuery类选择$('.item')来代替。
回答by adamdehaven
You can only have one element with the same idper page. IDmust be unique.
id每页只能有一个相同的元素。ID必须是唯一的。
Change all of the <div id="item1">tags to <div class="item1">, and then your jQuery would look like this:
将所有<div id="item1">标签更改为<div class="item1">，然后您的 jQuery 将如下所示：
<script>
$(function(){
if ( $(window).width() < 230 ) {
$('.item1').addClass('col1'); //max-width 80px
}
elseif ( $(window).width() >= 230 && $(window).width() < 330 ) {
$('.item1').addClass('col2'); //max-width 180px
}
else
{
$('.item1').addClass('col3'); //max-width 280px
}
});
</script>
