使用JQuery OnClick创建多个HTML元素

Question

我正在制作reddit页面的3个选项卡。当我点击任何一个选项卡时，我只希望以下内容在它们各自的选项卡中发生:

1. 使用特定类的 <div> 将在循环中创建，直到达到 xTcount
2. 我编写的Reddit函数将为这些 <div> 填充内容

然而，我遇到了在点击时创建 <div> 结构的问题。以下是我想要的HTML结构（我想要x个相同的结构）。

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

这是我的jQuery脚本，会在另一个元素被点击时运行。

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" );

    }

主要问题：

1. 每个单独的div被创建了10次，而不是先创建每个div一次，然后再重复10次。

非常感谢您的帮助！如往常一样。

- David Washburn

---

(divPerPage)Tcount 是什么？也许是 (divPerPage) / count？ - Alex K.

@Alex K. 啊，我不确定正确的JS是什么。我想要一个变量divPerPage来计数。所以在这种情况下，我想让divPerPage等于10，然后我想让函数计算10次。 - David Washburn

@AlexK。我本意只想放变量，现在我已经修复了我的代码并进行了更新。这部分解决了我的问题，但现在我的内容很混乱。 - David Washburn

Answer 1

您的问题在于使用了appendTo()。这些调用将找到这些类的每个实例并附加到其中的每个实例。您可以通过仅克隆要复制的整个元素，然后将其附加到容器中来大大简化此过程，如下所示：

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

如果由于某种原因你无法这样做，需要单独附加元素，那么你只需要重新调整如何添加元素，以仅将它们附加到新行的那些类的实例中。

可以这样做：

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"));
}

- Dave

---

这让我走上了正确的轨道，谢谢。但我仍然遇到了一个问题，我的Reddit只拉取了第一组数据并将其放入所有10个DIV中，但其他部分都是正常的。谢谢！ - David Washburn

Answer 2

我会使用@dave的方法克隆节点。

对于第一行（假设你在HTML中没有它），我会将所有的HTML都作为一个字符串附加上去。

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

我认为你不需要像那样分开它。

- Heretic Monkey