jQuery добавить несколько делений, используя $ (селектор) .each

Question

Я пытаюсь создать счетчик времени da sh. Я использовал следующее для создания di git divs

$('.dash').each((i, el) => {
    console.log(el);
    el.prepend('<div class="digit"><div class="top" style="display: none;">0</div><div class="bottom" style="display: block;">0</div></div>');
})

Я ожидаю, что это создаст что-то вроде

<div class="dash days_dash">
  <div class="digit">
    <div class="top" style="display: none;">0</div>
    <div class="bottom" style="display: block;">0</div>
  </div>
  <div class="digit">
    <div class="top" style="display: none;">0</div>
    <div class="bottom" style="display: block;">0</div>
  </div>
  <div class="digit">
    <div class="top" style="display: none;">0</div>
    <div class="bottom" style="display: block;">0</div>
  </div>
  <h3>Days</h3>
</div>

, но он просто отображает текст таким, какой он есть на виде. <div class="digit"><div class="top" style="display: none;">0</div><div class="bottom" style="display: block;">0</div></div>

Что я здесь не так делаю?

Answer 1

Вам нужно обернуть el в $(), так как это элемент DOM, а не объект jQuery, т. Е.

$('.dash').each((i, el) => {
  console.log(el);
  $(el).prepend('<div class="digit"><div class="top" style="display: none;">0</div><div class="bottom" style="display: block;">0</div></div>');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dash">
</div>
<div class="dash">
</div>

Но на самом деле вам вообще не нужен .each, вы можете просто prepend напрямую:

$('.dash').prepend('<div class="digit"><div class="top" style="display: none;">0</div><div class="bottom" style="display: block;">0</div></div>');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dash">
</div>
<div class="dash">
</div>

Answer 2

$('').each возвращает индекс и Element. Важно отметить, что он не возвращает объект jQuery. Это означает, что когда вы вызываете el.prepend, вы вызываете не метод jQuery prepend, а метод DOM prepend. Метод предварительного построения DOM *, ожидаемый , принимает либо Node объект, либо DOMString. В этом случае вы передаете строку, которая преобразуется в Text Node.

. Простое исправление состоит в том, чтобы изменить:

el.prepend(

на следующее:

$(el).prepend(

Answer 3

Это должно работать для вас, если я правильно понимаю ваш вопрос. В вашем примере у вас есть только один <div class="dash"></div>, поэтому для l oop будет выполняться только один раз. Но похоже, что вы хотите скопировать его 3 раза.

$('.dash').each((i, el) => {
   for(let i=0; i<3;i++) {
        $(el).prepend('<div class="digit"><div class="top" style="display: none;">0</div><div class="bottom" style="display: block;">0</div></div>');
    }
}

Answer 4

el.prepend должно быть $(el).prepend. el является элементом DOM, поэтому вы вызываете собственный метод prepend(); это обрабатывает строковый аргумент как текстовый узел, а не HTML.

$(el) создает объект jQuery, ссылающийся на элемент. Метод jQuery prepend() анализирует HTML.

$('.dash').each((i, el) => {
  console.log(el);
  $(el).prepend('<div class="digit"><div class="top" style="display: none;">0</div><div class="bottom" style="display: block;">0</div></div>');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dash">
</div>