CODEWITHSUNDEEP
jqueryhtml
Mayank Kumar Chaudhari
Mayank Kumar Chaudhari

Reputation: 18538

jQuery prepend multiple divs using $(selector).each

I am trying to create dash time counter. I used following to create the digit 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>');
})

I expect it to create something like 

<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>

but it simply displays the text as it is on the view. <div class="digit"><div class="top" style="display: none;">0</div><div class="bottom" style="display: block;">0</div></div>

What am I doing wrong here?

Upvotes: 1

Views: 58

Answers (4)

Hao
Hao

Reputation: 51

This should work for you if I understand you question correctly. In your example, you only have one <div class="dash"></div>, so the for loop will only run once. But seems like you want to copy it 3 times.

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

Upvotes: 0

Nick
Nick

Reputation: 147146

You need to wrap el in $() as it is a DOM element, not a jQuery object i.e.

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

But you don't actually need an .each at all, you can just prepend directly:

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

Upvotes: 3

wlh
wlh

Reputation: 3515

The $('').each returns an index and an Element. It is important to note that it does not return a jQuery object. This means that when you call el.prepend you are not calling the jQuery prepend method but the DOM prepend method. The DOM prepend method expects takes either a Node object or a DOMString. In this case, you are passing a String which gets converted into a Text Node.

A simple fix is to change: 

el.prepend(

to this:

$(el).prepend(

Upvotes: 1

Barmar
Barmar

Reputation: 780798

el.prepend should be $(el).prepend. el is a DOM element, so you're calling the native prepend() method; this treats a string argument as a text node, not HTML.

$(el) creates a jQuery object referring to the element. The jQuery prepend() method parses the 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>

Upvotes: 0

Related Questions