Count length of an array and create the same amount of HTML elements with JS/jQuery

Question

Is it possible to query the length of an array and then use JS/jQuery to create the same amount of new HTML elements client side?

The code I have for the array is:

var psC1 = [
'item1',
'item2',
'item3'
];

alert(psC1.length);

Which will alert that there's 3 items in the array. I now want to create three iframes on the page, and index the array into the src attribute of each element.

The code I'd use to insert the src of the iframes using the array would be:

  $('.test-iframe').each(function() {
    $(this).attr('src', psC1[$(this).index()]); 
   });

What I'm struggling with is after counting the array, is creating three iframes with JS/jQuery.

T.J. Crowder · Accepted Answer · 2012-12-06 13:55:16Z

2

To create an iframe with jQuery, you use the $ function (or jQuery in no-conflict mode):

$("<iframe>").appendTo(document.body);

Of course, you don't have to append to body, you can put the iframe wherever you need it.

In your case, perhaps something like this:

$.each(psC1, function(index, value) {
    $("<iframe>").attr("src", value).appendTo(document.body);
});

$.each loops through the array entries.

answered Dec 6, 2012 at 13:55

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

3 Comments

JayDee Over a year ago

Thanks... that creates one iframe, which is a start - what I want is to create 3 of them (or whatever the count of the array comes back with) and then index them.

T.J. Crowder Over a year ago

@JayDee: Well, you said it was creating them that was giving you trouble. :-) But see the update.

JayDee Over a year ago

Oooh, that's nice...Thanks! :)

Explosion Pills · Accepted Answer · 2012-12-06 13:56:47Z

1

for (var x = 0; x < psC1.length; x++) {
   $("<iframe>", {'src': x}).appendTo("body");
}

The $("<iframe>") syntax creates the element. .appendTo adds it to the DOM. Note that this will just create iframes with source of "0," "1," and "2," so you probably want something like '/some/path/?page=' + x as the src.

Note that you could also use $.each instead of a normal for loop, but it's more expensive and, in my opinion, unnecessary.

answered Dec 6, 2012 at 13:56

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

5 Comments

T.J. Crowder Over a year ago

FWIW, the variant of $ that allows you to specify attributes as a second argument is almost certainly going to be removed from jQuery soon.

Explosion Pills Over a year ago

@T.J.Crowder that's good to know; can you provide a link to the documentation on that?

T.J. Crowder Over a year ago

@ Explosion: I can't, no, it was an off-comment from Dave Methvin in the context of some other bug report. The complexity around the hyper-overloading of the $ function is getting to be a bigger and bigger problem (gosh, who knew?). ;-)

Explosion Pills Over a year ago

@T.J.Crowder thanks; I personally always thought that the $("< syntax was bizarre. I assume they're going to keep that, but apparently I've been creating elements incorrectly for quite some time

T.J. Crowder Over a year ago

@ Explosion: Well, it's not currently incorrect. :-) And I seem to recall after Dave made that comment, he got pushback. But basically he said to do $("<element>").attr({ ... }) instead (which promptly sparks the prop vs. attr debate, argh!).

happygilmore · Accepted Answer · 2012-12-06 13:59:11Z

0

You could use a loop to create the HTML

var iframeHTML = "";
for (int i = 0; i < count; i++)
{
    iframeHTML += "<iframe class='test-iframe'></iframe>";
}

then append the HTMLString where you want.

answered Dec 6, 2012 at 13:59

happygilmore

3,1254 gold badges26 silver badges37 bronze badges

Comments

Laurent Perrin · Accepted Answer · 2012-12-06 14:02:07Z

0

You can make this cleaner with jQuery.map:

$('body').append($(psC1).map(function (i, src) {
    return $('<iframe>').attr('src', src);
}).get());

answered Dec 6, 2012 at 14:02

Laurent Perrin

14.9k5 gold badges53 silver badges49 bronze badges

Collectives™ on Stack Overflow

Count length of an array and create the same amount of HTML elements with JS/jQuery

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related