Question

我是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级但其余的不起作用？

Answer 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");

});

Answer 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");

因为$ variable在初始化时设置为jQuery。

Answer 3

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

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

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

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

Answer 4

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

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

所以以下内容会起作用：

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

如果您要使用parent（）或类似的

如何使用jQuery Selector将CSS类添加到元素？

4 个答案: