Create Multiple HTML Elements With JQuery OnClick

Question

I have 3 tabs for a reddit page I am making. When I click any of the tabs I want the following things to happen ONLY in their respective tabs:

<div>'s with specific classes will be created in a loop until xTcount
Reddit function I have written will populate those <div>'s with content

I'm having trouble getting the <div> structure to create OnClick though. Here is what I want my HTML structure to look like (I want x number of identical ones).

            <div class="newsContainer">
                <div class="redditThumbnail clearfix floatleft"></div>
                <div class="articleHeader read clearfix">
                    <div class="actionmenuHeader">
                        <div class="userNameContainer"></div>
                        <div class="redditFlair"></div>
                        <div class="subRedditName"></div>
                        <div class="redditDate"></div>
                        <div class="redditScore">
                            <i class="redditUpvote material-icons">
                                keyboard_arrow_up
                            </i>
                        </div>
                    </div>
                    <p class="redditTitle clearfix mediaTitle news"></p>
                    <div class="redditPost mediumtext"></div>
                </div>
            </div>

And here is my JQuery script that runs OnClick of another element.

var divPerPage = 10;
    for(var i = 0; i < divPerPage; i++) {

        $( "<div class='listrow news nomargin'></div>" ).appendTo( "#redditCardBox1" );
        $( "<div class='newsContainer'></div>" ).appendTo( ".listrow" );
        $( "<div class='redditThumbnail clearfix'></div>" ).appendTo( ".newsContainer" );
        $( "<div class='articleHeader read clearfix'></div>" ).appendTo( ".newsContainer" );
        $( "<div class='actionmenuHeader'></div>" ).appendTo( ".articleHeader" );
        $( "<div class='userNameContainer'></div>" ).appendTo( ".actionmenuHeader" );
        $( "<div class='redditFlair'></div>" ).appendTo( ".actionmenuHeader" );
        $( "<div class='subRedditName'></div>" ).appendTo( ".actionmenuHeader" );
        $( "<div class='redditDate'></div>" ).appendTo( ".actionmenuHeader" );
        $( "<div class='redditScore'></div>" ).appendTo( ".actionmenuHeader" );
        $( "<i class='redditUpvote material-icons'>keyboard_arrow_up</i>" ).appendTo( ".redditScore" );
        $( "<p class='redditTitle clearfix mediaTitle news'></p>" ).appendTo( ".articleHeader" );
        $( "<div class='redditPost mediumtext'></div>" ).appendTo( ".articleHeader" );

    }

Primary issue:

Each individual div is being created 10 times instead of creating each div once and then starting over 10 times.

Any help is appreciated! As always.

What is (divPerPage)Tcount ? (divPerPage) / count perhaps? — Alex K.
– Alex K., Commented Aug 19, 2016 at 14:59
@Alex K. Ah I wasn't sure what the correct JS would be. I want to have a variable divPerPage be the count. So in this case I wanted divPerPage to = 10, and then I wanted the function to count 10 times. — David Washburn
– David Washburn, Commented Aug 19, 2016 at 16:09
@AlexK. I meant to put just the variable, I fixed my code now and updated it. This partially fixed my issue but now my content is crazy. — David Washburn
– David Washburn, Commented Aug 19, 2016 at 16:12

Pankaj Makwana · Accepted Answer · 2017-10-17 13:12:34Z

Your problem is your use of appendTo(). Those calls are going to find every instance of those classes and append to each of them. You can simplify this greatly by just cloning the entire element to be copied and then append it to the container, like this:

var divPerPage = 10;
for (var i = 0; i < divPerPage; i++) {
    $(".listrow").eq(0).clone().appendTo("#redditCardBox1");
}

If for some reason you can't do that and you need to individually append the elements, you just need to rework how you are appending to only append to the instances of those classes in the new row.

Something like this:

var divPerPage = 10;
for (var i = 0; i < divPerPage; i++) {
    var row = $("<div class='listrow news nomargin'></div>").appendTo("#redditCardBox1");
    $("<div class='newsContainer'></div>").appendTo(row.find(".listrow"));
    $("<div class='redditThumbnail clearfix'></div>").appendTo(row.find(".newsContainer"));
    $("<div class='articleHeader read clearfix'></div>").appendTo(row.find(".newsContainer"));
    $("<div class='actionmenuHeader'></div>").appendTo(row.find(".articleHeader"));
    $("<div class='userNameContainer'></div>").appendTo(row.find(".actionmenuHeader"));
    $("<div class='redditFlair'></div>").appendTo(row.find(".actionmenuHeader"));
    $("<div class='subRedditName'></div>").appendTo(".actionmenuHeader"));
    $("<div class='redditDate'></div>").appendTo(row.find(".actionmenuHeader"));
    $("<div class='redditScore'></div>").appendTo(row.find(".actionmenuHeader"));
    $("<i class='redditUpvote material-icons'>keyboard_arrow_up</i>").appendTo(row.find(".redditScore"));
    $("<p class='redditTitle clearfix mediaTitle news'></p>").appendTo(row.find(".articleHeader"));
    $("<div class='redditPost mediumtext'></div>").appendTo(row.find(".articleHeader"));
}

This has put me on the right track, thank you. I'm still running into an issue where my reddit only pulls the first set of data and places it into all 10 of my DIV's, but the rest is function. Thanks!

Heretic Monkey · Accepted Answer · 2016-08-19 17:43:31Z

I'd use @dave's approach of cloning the nodes.

For the first row, though (assuming you don't already have it in the HTML already), I'd just append the HTML all in one string:

$('#redditCardBox1').append('<div class='listrow news nomargin'><div class="newsContainer"><div class="redditThumbnail clearfix floatleft"></div><div class="articleHeader read clearfix"><div class="actionmenuHeader"><div class="userNameContainer"></div><div class="redditFlair"></div><div class="subRedditName"></div><div class="redditDate"></div><div class="redditScore"><i class="redditUpvote material-icons">keyboard_arrow_up</i></div></div><p class="redditTitle clearfix mediaTitle news"></p><div class="redditPost mediumtext"></div></div></div></div>');

I don't think you need to break it up like that.

Collectives™ on Stack Overflow

Create Multiple HTML Elements With JQuery OnClick

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related