jQuery使用$(选择器)预处理多个div

mayank1513 • 5 年前 • 1729 次点击

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

我在这里做错什么了?

Python社区是高质量的Python/Django开发社区
本文地址：http://www.python88.com/topic/52946

1729 次点击

文章 [ 4 ] | 最新文章 5 年前

• 1 楼

Hao 5 年前

如果我正确理解你的问题,这对你应该有用。 <div class="dash"></div> ,因此for循环将只运行一次。但你好像想抄3遍。

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

• 2 楼

Barmar 5 年前

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>

• 3 楼

wlh 5 年前

这个 $('').each 返回索引和 Element . 需要注意的是,它不返回 jQuery el.prepend 你不是在打电话给 jQuery公司 prepend方法,但DOM prepend方法。这个 DOM prepend method Node 对象或 DOMString . 在本例中,您传递的字符串将转换为 Text Node .

一个简单的解决方法是改变:

el.prepend(

对此:

$(el).prepend(

• 4 楼

Nick 5 年前

你需要包装 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 class=“dash”>

登录后回复