jQuery добавить активный класс в третий динамически созданный div

У меня есть этот див:

<div class="mm_vert_container" style="display: block;"></div>

После запуска кода jQuery я динамически добавляю div внутри над mm_vert_container, и мой код выглядит так:

<div class="mm_vert_container" style="display: block;">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
</div>

Поэтому мне нужно добавить к каждому третьему div, если существует активный класс, поэтому он должен выглядеть так:

<div class="mm_vert_container" style="display: block;">
    <div>A</div>
    <div>B</div>
    <div class="active">C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
</div>

Я пытаюсь использовать код jQuery, чтобы добавить активный класс в третий div:

$(".mm_vert_container div:nth-child(2)").addClass("active");

Но он не добавляет активный класс к третьему элементу. Я думаю, что проблема заключается в динамически генерируемых div, а затем элемент DOM, использующий приведенный выше код jQuery, не видит динамически генерируемые div, и поэтому это не работает?


javascript jquery dynamically-generated
person Igor Petev    schedule 22.05.2018    source источник

Ответы (3)


arrow_upward
4
arrow_downward

Во-первых, обратите внимание, что индексы при использовании селекторов nth-child начинаются с 1, поэтому элемент «C» имеет индекс 3, а не 2.

Чтобы добавить класс к каждому третьему элементу, используйте nth-child(3n), например:

$(".mm_vert_container div:nth-child(3n)").addClass("active");
.active { 
  color: #FFF;
  background-color: #C00; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mm_vert_container" style="display: block;">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
</div>

Также обратите внимание, что jQuery здесь не требуется, поскольку селектор nth-child() хорошо поддерживается напрямую в CSS:

.mm_vert_container div:nth-child(3n) { 
  color: #FFF;
  background-color: #C00; 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mm_vert_container" style="display: block;">
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
</div>

Последнее было бы гораздо лучшим решением, потому что оно отделяет логику JS от пользовательского интерфейса, а также означает, что любые дочерние элементы div, которые вы добавляете динамически на более позднем этапе жизненного цикла страницы, автоматически получают стиль; т.е. вам не нужно будет снова обновлять DOM вручную.

person Rory McCrossan    schedule 22.05.2018
comment
Спасибо, использование css работает, но использование кода jQuery не работает ... есть ли проблемы с динамическим добавлением div? - person Igor Petev; 22.05.2018
comment
Да, вам нужно выполнить эту строку кода jQuery после добавления элементов - предположительно, в обратном вызове вашего запроса AJAX. Это проблема, о которой я тоже упоминал, когда упомянул, что подход CSS намного лучше. - person Rory McCrossan; 22.05.2018
comment
Все ответы очень полезны, и я добавил их последними, потому что я пробую все решения и работают очень хорошо ... я голосую за все ответы и принимаю ваши как принятые, поскольку ваш пост очень подробный и опубликован первым ... спасибо за помощь - person Igor Petev; 22.05.2018

arrow_upward
2
arrow_downward

найти дочерний элемент .mm_vert_container с помощью метода find() и :nth-child() Selector для выбора всех элементов, которые являются n-ми дочерними элементами своего родителя.

$(".mm_vert_container div:nth-child(3n)").addClass("active");
person Kiran Shahi    schedule 22.05.2018
comment
Обратите внимание, что это получает только третий элемент, а не каждый третий элемент. - person Rory McCrossan; 22.05.2018

arrow_upward
1
arrow_downward

Вместо $(".mm_vert_container div:nth-child(2)").addClass("active"); код должен быть $(".mm_vert_container div:nth-child(3)").addClass("active"); для создания третьего дочернего элемента, потому что nth-child(2) означает второй дочерний элемент.

Лучше использовать $(".mm_vert_container div:nth-child(3n)").addClass("active");, если вы хотите воздействовать на каждого третьего ребенка, тогда вам не понадобится цикл. Вы можете сделать это только с помощью CSS.

Надеюсь, это поможет.

Спасибо.

person Code_Ninja    schedule 22.05.2018