Javascript 如何将类添加到多个元素？

我正在使用javascript向多个元素添加一个类。我正在尝试引用多个div并向其添加类。它只对第一个有效

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>

$（函数（）{
如果（$（窗口）.width（）<230）{
$（'#item1'）.addClass（'col1'）；//最大宽度80px
}
其他的
如果（$（窗口）.width（）>=230&&$（窗口）.width（）<330）{
$（'#item1'）.addClass（'col2'）；//最大宽度180px
}
其他的
{
$（'#item1'）.addClass（'col3'）；//最大宽度280px
}
});

如果我在页面上只有一个#item1，但它似乎不想将该类添加到存在于同一div id中的多个项中，这是可行的。我甚至尝试将该类添加到存在于同一div class而不是id中的多个项中。如果您能找到答案，任何一个都将是一个很好的解决方案

我的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>

价格范围：
价格范围：

---

几个小时来我一直在想这个问题，所以我想问问是否有人能给我指出正确的方向。提前谢谢

ID应该是唯一的。尝试添加一个类，例如“item”：

---

每页只能有一个元素具有相同的

id

<代码>ID必须是唯一的

将所有

标记更改为

，然后您的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>

$（函数（）{
如果（$（窗口）.width（）<230）{
$（'.item1'）.addClass（'col1'）；//最大宽度80px
}
elseif（$（窗口）.width（）>=230&$（窗口）.width（）<330）{
$（'.item1'）.addClass（'col2'）；//最大宽度180px
}
其他的
{
$（'.item1'）.addClass（'col3'）；//最大宽度280px
}
});

使用

class

代替

id

进行操作：

i、 e

var newClass=''；
如果（$（窗口）.width（）<230）{
newClass='col1'；
}
如果（$（window.width（）>=230&&$（window.width（）<330），则为else{
newClass='col2'；
}
否则{
newClass='col3'；
}
$（'.blue'）.addClass（newClass）；//将应用于蓝色类的所有元素

使用类选择器而不是id:

$('.toAdd').addClass('col3');

---

这将向包含类“toAdd”的所有元素添加类“col3”。

具有多个具有相同id的元素不是有效语法，jQuery

$（“#anyId”）

中的id选择器始终返回具有该id的第一个项，而不是多个项

---

在html和jQuery类选择器中使用

，

$（'.item'）

。

类仅添加到一个div的原因是，id在html中应该是唯一的。当使用id选择器时，jQuery只返回第一个匹配的项。你有三个选择

选项一：使用类

项

代替id

项1

，并使用以下选择器

$('.item').addClass('col1');

$('#item1, #item2').addClass('col1');

选项二：将第二个div上的id更改为

item2

，并使用以下选择器

$('.item').addClass('col1');

$('#item1, #item2').addClass('col1');

选项三：使用属性选择器（这更像是一种黑客行为）

---

我假设您正在使用jQuery，所以我为您添加了该标记。您考虑过媒体查询吗？元素的id在页面上应该是唯一的。你想做的事不应该奏效。改为使用类。@一个技巧是如何按照你的建议将其放入窗口重新调整大小事件中？

$（窗口）。在（'resize'，函数（…

）上应该可以工作。但是，使用媒体查询时，Šime的建议是一个更好的选择。这样，你根本不需要JS和额外的类。$（'.item1'）将始终返回该类中的所有元素。这是用户试图完成的。在下一票之前阅读问题。我理解问题，只是没有完全阅读您的答案。编辑答案，我将删除下一票。

$('#item1, #item2').addClass('col1');

$('div[id="item1"]').addClass('col1');