如何使用 jQuery 选择器向元素添加 CSS 类？答案

【问题标题】：How to add a CSS class to an element using a jQuery Selector?如何使用 jQuery 选择器向元素添加 CSS 类？
【发布时间】：2015-05-12 01:30:48
【问题描述】：

我对 JavaScript 和 jQuery 还很陌生，对“选择器”有点困惑。现在我相信你们都是大师，并且会发现这个微不足道的，所以希望你能提供帮助。

我有这个 HTML：

  <div class="class0">
    <div class="class1">
      <div class="class2">
        <div class="class3">Field 1:</div>
           <label class="class4">
               <input name="field" type="text" class="class5" />
           </label>

我正在尝试将类添加到许多元素中，但我遇到了困难。我正在尝试：

jQuery('.class0 input')
    .focus(function() {
    jQuery(this).parents('.class1').addClass("special_class");
    jQuery(this).parents('.class3').addClass("special_class_1");
    jQuery(this).parents('.class5').addClass("special_class_2");

但它似乎不起作用 - 第 1 类可以，但其余的不起作用？

【问题讨论】：

请解释上下文。 “这”是什么？
这里的this 是什么？即这是在哪里调用的？
@philippe, @Daniel 'this' 这里是获得焦点的元素

标签： jquery html css

【解决方案1】：

如果您只针对一位父母，请使用 .closest 而不是父母。

此外，如果您知道具有类的元素的节点类型，最好在选择器前面加上前缀。在这种情况下，它们看起来都像 div。

试试：

jQuery('div.class0 input').focus(function() {

    var $el= $(this);
    $el.closest('div.class1').addClass("special_class");
    $el.closest('div.class3').addClass("special_class_1");
    $el.closest('div.class5').addClass("special_class_2");

});

【讨论】：

【解决方案2】：

我怀疑应该是：

jQuery('.class1').parents().addClass("special_class");
jQuery('.class3').parents().addClass("special_class_1");
jQuery('.class5').parents().addClass("special_class_2");

甚至像这样：

$('.class1').parents().addClass("special_class");
$('.class3').parents().addClass("special_class_1");
$('.class5').parents().addClass("special_class_2");

因为 $ 变量在初始化时被设置为 jQuery。

【讨论】：

【解决方案3】：

如果你想用 'old_class' 将 'new_class' 添加到 div 中，你应该这样做：

$('div.old_class').addClass('new_class');

如果你想用 'old_class' 将 'new_class' 添加到 div 的父级，你应该这样做：

$('div.old_class').parent().addClass('new_class')

【讨论】：

【解决方案4】：

我知道已经找到了更改这些 div 上的类的解决方案，但我认为需要指出的是，在您上面的示例中，以下是正确的：

class="class5" 的输入是 'this' 对象，而不是父对象，因此使用 parent('.class5') 时选择器将找不到它
在层次结构中，具有 class="class3" 的 div 被关闭，因此不是 'input.class5' 的父级。相反，具有 class="class3" 的 div 是您示例中标签的兄弟。

所以以下方法会起作用：

jQuery(this).parents('.class2').addClass("special_class_1");

如果要使用 parent() 或类似的，请记住树状结构

【讨论】：