使用JQuery OnClick创建多个HTML元素

Question

我有3个标签用于我正在制作的reddit页面。 当我单击任何选项卡时，我希望仅在各自的选项卡中执行以下操作：

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

我无法获得<div>结构来创建OnClick。 这就是我希望我的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脚本运行另一个元素的OnClick。

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

任何帮助表示赞赏！ 一如既往。

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

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

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