0

Ситуация такова, есть следующая структура:

<section class="row_clear">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

В существующую структуру между вторым и третьим divом необходимо вставить специальный блок

<div class="clearfix hidden-lg"></div>

Чтоб получилось так:

<section class="row_clear">
    <div></div>
    <div></div>
    <div class="clearfix hidden-lg"></div>
    <div></div>
    <div></div>
</section>

Вроде бы ничего сложного, вот код

    var div       = document.createElement('div');
    div.className = "clearfix hidden-lg";
    row_clear.insertBefore(div, row_clear.children[2]);

Но тут появилась проблема, подобных "row" блоков на странице может быть от 10 и больше. А с помощью 'cloneNode' не хочется реализовывать, так как код будет громадным, и для каждого нового 'row' придется создавать новую переменную...

Помогите решить данную проблему... нигде не могу найти нужный ответ...

1 ответ 1

2

C помощью querySelectorAll выбрать все section с классом row_clear и в цикле произвести insertBefore

var x = document.querySelectorAll(".row_clear");

for (var i = 0; i < x.length; i++) {
    var div = document.createElement('div');
    div.className = "clearfix hidden-lg";
    x[i].insertBefore(div, x[i].children[2]);   
}
.row_clear {
  border: 1px solid red;
  padding: 5px;
}
.row_clear div {
  border: 1px solid green;
  padding: 5px;
}

.hidden-lg {
  padding: 5px;
  background: blue;
}
<section class="row_clear">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

<hr>

<section class="row_clear">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

<hr>

<section class="row_clear">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>

2
  • Благодарю! Просто я еще новичок в java, только учусь)
    – Hochru
    23 июн 2016 в 13:36
  • 1
    @Hochru java != javascript :) Удачного обучения) 23 июн 2016 в 13:43

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.