Create elements with jQuery each not working

Question

I have a dynamic rotator that I am trying to create a nav button for each image. I dont have access to the back end so I have to do this with jQuery on load.

My thinking is that I find each LI item and create a new and append it in the nav but I cant seem to get it working

http://jsfiddle.net/bc0yu7pg/2/

jQuery

navItem = 0;

$( "li" ).each(function() {
    navLink = '<a href="javascript:void() id="rot' + navItem + '"></a>';
    $('section').append(navLink);
    navItem++;
});

HTML

<section>
        <ul>
            <li>Slide</li>
            <li>Slide</li>
            <li>Slide</li>
        </ul>
        <nav></nav>
</section>

Make sure you close the href in your a tag. It could also use some anchor text. Also, wrap it in a doc ready to ensure it fires after the li's are added to the page — wolffer-east, Aug 08 '14 at 17:42

Kiran · Accepted Answer · 2014-08-08T17:44:13.870

2

Use $('section nav') instead of $('section'). Try this:

navItem = 0;

$( "li" ).each(function() {
    navLink = '<a href="javascript:void()" id="rot' + navItem + '"></a>';
    $('section nav').append(navLink);
    navItem++;
});

DEMO

Hope this helps you :)

edited Aug 08 '14 at 17:44

answered Aug 08 '14 at 17:38

Kiran

20,167
11
67
99

score 0 · Answer 2 · answered Aug 08 '14 at 17:41

You have a missing quote mark. You never close the href quote. Also you should assign to the nav as @Unknown said.

navItem = 0;

$( "li" ).each(function() {
    navLink = '<a href="javascript:void()" id="rot' + navItem + '"></a>';
    $('section nav').append(navLink);
    navItem++;
});

Working fiddle

score 0 · Answer 3 · answered Aug 08 '14 at 17:42

You're adding your link to the <section> element rather than to the <nav> element.

$( "li" ).each(function() {
    navLink = '<a href="javascript:void() id="rot' + navItem + '"></a>';
    $('nav').append(navLink);
    navItem++;
});

See this updated jsfiddle jsfiddle.net/bc0yu7pg/5/

However I think your CSS may need some extra work.

score -1 · Answer 4 · edited May 23 '17 at 12:22

-1

You can not use section as a normal container in DOM for this kind of manipulation. https://stackoverflow.com/a/7183188/1027550

edited May 23 '17 at 12:22

Community

1
1

answered Aug 08 '14 at 17:44

MRodrigues

1,927
1
17
22

Create elements with jQuery each not working

4 Answers4