jQuery给多个不同元素添加class样式的方法

在前端网页开发中，我们经常需要对多个不同元素同时添加相同的 class 样式。而使用 jQuery 可以非常方便地实现这一功能。

1. 使用addClass方法

jQuery 提供了 addClass 方法，可以为指定的元素集合添加一个或多个 class 样式。其语法如下：

$(selector).addClass(className);

其中，selector 表示要添加 class 样式的元素集合，可以是元素名称、类名、ID 等选择器；className 则表示要添加的 class 样式名称，可以是一个或多个空格分隔的多个名称。

例如，我们要为所有 p 元素和 ID 为 myDiv 的 div 元素添加 class 样式 highlight、content 和 border，则可以使用以下代码：

$("p, #myDiv").addClass("highlight content border");

这样，所有匹配的元素都会同时拥有这三个 class 样式。

2. 使用each方法

有时候，我们需要对不同类型的元素分别添加不同的 class 样式。此时，可以使用 jQuery 的 each 方法遍历每一个元素，并根据元素类型来添加对应的 class 样式。其语法如下：

$(selector).each(function() {
  if (this.tagName === "div") {
    $(this).addClass("highlight");
  } else if (this.tagName === "p") {
    $(this).addClass("content");
  }
});

其中，selector 表示要添加 class 样式的元素集合；each 方法接受一个参数，是一个回调函数，用于对每个元素进行处理。在回调函数中，this 表示当前遍历到的元素。

例如，我们要为所有 p 元素和 div 元素分别添加不同的 class 样式，可以使用以下代码：

$("p, div").each(function() {
  if (this.tagName === "div") {
    $(this).addClass("highlight");
  } else if (this.tagName === "p") {
    $(this).addClass("content");
  }
});

这样，所有 div 元素都会添加 highlight 样式，所有 p 元素都会添加 content 样式。

3. 总结

通过以上两种方法，我们可以非常方便地为多个不同类型的元素同时添加相同或不同的 class 样式。在实际开发中，根据具体需求选择不同的方法即可。

示例代码：CodePen

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/2537