Wrapping and appending an array-element by using jQuery.each

Question

I'm destroying myself over this. Not the must experienced ind js. But this should be simple right?

I want to wrap each element in my 'arr'-array in <div class="mongol"></div> and append it to the div#testBox. Im using jQuery.each to do so, but I am not getting anything:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript'>
  var arr = ["one", "two", "three", "four", "five"]

  jQuery.each(arr, function() {
    $(this).append("#testBox").wrap("<div class='mongol'></div>");
  });
</script>

If i alert(this) in my jQuery.each-function then it alerts every element just fine. I don't get it.

What i am trying to achieve:

<div id="testBox>
    	<div class=" mongol ">one</div>
    	<div class="mongol ">two</div>
    	<div class="mongol ">three</div>
    	<div class="mongol ">four</div>
    	<div class="mongol ">five</div>
    </div>

Frédéric Hamidi · Accepted Answer · 2011-02-15 13:25:40Z

7

Are you confusing append() with appendTo()? The code you posted will append the testBox element to each of your array items, which is probably not what you want (and won't work anyway). Try:

jQuery.each(arr, function(index, item) {
    jQuery("<div class='mongol'></div>").text(item).appendTo("#testBox");
});

edited Feb 15, 2011 at 13:25

answered Feb 15, 2011 at 13:06

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Jonas Thomsen Over a year ago

This triggers an error: Uncaught TypeError: Object has no method 'appendTo' (?) But what about this? $(this).wrap("<div class='mongol'></div>").appendTo("#testBox");

Frédéric Hamidi Over a year ago

@Jonas, strange, that should work. text() returns the jQuery object, so it should be possible to call appendTo() on the result. I'll investigate that. Also, I don't think your suggestion will work: $(this) will try to match elements whose tag name are the same as your array items (i.e. none).

Jonas Thomsen Over a year ago

Thats weird. I don't know if its the jquery.each-thing that does it. But my question has been answered now. Thanks alot for you help. Jonas :)

Frédéric Hamidi Over a year ago

@Jonas, got it, this was remapped after the call to jQuery(). Using explicit parameters fixes it. Answer updated accordingly.

Jonas Thomsen Over a year ago

Yeah that did the trick :) Double solutions to a simple problem is twice as nice. Thank you

Marcel Colomb · Accepted Answer · 2011-02-15 13:28:23Z

4

var arr = [ "one", "two", "three", "four", "five" ]
    jQuery.each(arr, function(index, value) {
    $("#testBox").append("<div class='mongol'>" + value + '</div>');
 });

That works if you have a <div> like that in your Site

<div id="testBox"></div>

edited Feb 15, 2011 at 13:28

answered Feb 15, 2011 at 13:15

Marcel Colomb

6225 silver badges23 bronze badges

3 Comments

Marcel Colomb Over a year ago

Cool! Sorry about the console.log() :)

Jonas Thomsen Over a year ago

haha thats just fine. Didn't even knew i existed, so now i have another debugging-tool. 2 x thanks :)

Marcel Colomb Over a year ago

Oh for debugging javascript always use console.log() and firebug otherwise you can't loop throw stuff and so on...

Collectives™ on Stack Overflow

Wrapping and appending an array-element by using jQuery.each

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related