Как добавить класс CSS к элементу, используя селектор jQuery?

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

Я знаю, что решение по изменению класса для этих div было найдено, но я думаю, что нужно указать, что в вашем примере выше, верно следующее:

1. input with class = "class5" является объектом 'this', а не родительским, поэтому селектор при использовании parent ('. Class5') не найдет его

2. В иерархии div с class = "class3" закрывается и поэтому не является родителем для input.class5. Скорее, div с class = "class3" является родственным элементом метки в вашем примере.

Итак, сработало бы следующее:

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

Имейте в виду древовидную структуру, если вы собираетесь использовать parent () или аналогичный

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

, поскольку переменная $ устанавливается в jQuery при ее инициализации.

Answer 3

Если вы хотите добавить 'new_class' в div с 'old_class', вы должны сделать что-то вроде этого:

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

Если вы хотите добавить new_class к родителю div с помощью old_class, вы должны сделать что-то вроде этого:

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

Answer 4

Если вы нацелены только на одного родителя, используйте .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");

});