Блог

Главная - Вопросы по программированию - jQuery addClass для подкласса CSS

jQuery addClass для подкласса CSS

#jquery #addclass

#jquery #addclass

Вопрос:

Спрашивать об этом несколько неловко, потому что я чувствую, что должен знать ответ. Как добавить подкласс CSS в DIV с помощью jQuery.

Итак, мой CSS = 

 .class1 .subclass1 {

  width: 10px;
  heigh: 10px;

}

Как мне добавить подкласс 1 в DIV? например 

 $("#foo").addClass( ????? )

Я попытался выполнить addClass(class1 subclass1), но это не работает, поскольку я считаю, что jquery ожидает, что subclass1 будет независимым классом. Конечно, если я избавлюсь от понятия подкласса и просто вызову класс «class1-subclass1» в моем CSS, тогда, конечно, это сработает.

Кто-нибудь?

Спасибо

Комментарии:

1. Правило CSS, которое вы показываете, требует 2 разных элемента, что означает, что 2 класса могут не принадлежать одному и тому же элементу.

2. Довольно запутанно ..! можете ли вы опубликовать ожидаемую разметку ..?

3. Добавление так называемого подкласса в этом случае может означать точное добавление некоторого дочернего элемента (имеющего класс subclass1 ) в ваш div.

4. Не уверен, в чем путаница с вопросом. В CSS у вас могут быть подклассы, да? Итак, выше у меня есть CSS, где .subclass1 — это подкласс class1. Итак, обычно в jquery, если бы у меня не было подкласса, и я собирался создать addClass для DIV с id = «foo», я бы сделал $(«#foo»).addClass(«class1») . Все, что я спрашиваю, это как мне указать подкласс в addClass? Я попробовал $(«#foo).addClass(«подкласс class1»). Это не сработало, потому что я думаю, что jquery ожидает, что ‘subclass1’ будет независимым классом. Итак, как мне сделать addClass для подкласса?

Ответ №1:

Позвольте мне объяснить, как работает цепочка классов css…

Если вы пишете (с пробелом между 2 классами):

 .class1 .subclass1{
  width: 10px;
  heigh: 10px;
}

Это относится ко всем «потомкам» a <div id="foo" class="class"> , имеющим class .subclass1 .
Для этого ваш html должен быть отформатирован примерно так:

 <div id="foo" class="class1">
  <div class="subclass1">Hello World</div>
</div>

Если вы хотите, чтобы оба .class1 и .subclass1 применялись к одному и тому же <div> , и ваш html выглядит примерно так:

 <div class="class1 subclass1">
  <div class="">Hello World</div>
</div>

Ваш css должен быть: (без пробела между 2 классами)

 .class1.subclass1{
      width: 10px;
      heigh: 10px;
    }

или….

 .class1{
         <some code>
        }
.subclass1{
          width: 10px;
          heigh: 10px;
        }

Теперь, чтобы ответить на ваш вопрос:
Для JS вы фактически добавляете 2 разных класса. Поэтому вы должны вызвать метод addClass дважды:

 $("#foo").addClass('class');
$("#foo").addClass('subclass');

Вам решать, где применять классы.