Question

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

<div>将在循环中创建，直到xTcount
我编写的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" );

    }

主要问题：

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

我认为你不需要像那样打破它。

使用JQuery OnClick创建多个HTML元素

2 个答案: