$('.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>
<div class="digit"><div class="top" style="display: none;">0</div><div class="bottom" style="display: block;">0</div></div>
我在这里做错什么了?
如果我正确理解你的问题,这对你应该有用。 <div class="dash"></div> ,因此for循环将只运行一次。但你好像想抄3遍。
<div class="dash"></div>
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>'); }
el.prepend 应该是 $(el).prepend . el 是一个DOM元素,所以您调用本机 prepend() 方法;它将字符串参数视为文本节点,而不是HTML。
el.prepend
$(el).prepend
el
prepend()
$(el) 创建引用元素的jQuery对象。jQuery prepend() 方法解析HTML。
$(el)
$('.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>
这个 $('').each 返回索引和 Element . 需要注意的是,它不返回 jQuery el.prepend 你不是在打电话给 jQuery公司 prepend方法,但DOM prepend方法。这个 DOM prepend method Node 对象或 DOMString . 在本例中,您传递的字符串将转换为 Text Node .
$('').each
Element
jQuery
jQuery公司
Node
DOMString
Text Node
一个简单的解决方法是改变:
el.prepend(
对此:
$(el).prepend(
你需要包装 el $() 因为它是一个DOM元素,而不是jQuery对象。
$()
<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
.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”>