jQuery 使用 $(selector).each 在前面添加多个 div

Question

我正在尝试创建冲刺时间计数器。我使用以下方法创建数字 div

$('.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>

但它只是显示 View 上的文本。 <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，你可以直接前置:

$('.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>