JQuery 将多个子内容附加到父元素

Question

我必须使用 jquery 动态地将多个子内容添加到父元素，这是我指的示例代码https://github.com/linslin/pagingSlider ，代码是这样的，

<div id="wrapper">
    <div class="slidepage-container myPageContainerClass">
        <div id="badges-slidepage-1" page="1" class="psPage center current">
            <div class="content">
               <h2>Page 1</h2>
            </div>
        </div>
        <div id="badges-slidepage-2" page="2" class="psPage right">
            <div class="content">
               <h2>Page 2</h2>
            </div>
        </div>
        <div id="badges-slidepage-3" page="3" class="psPage right">
            <div class="content">
               <h2>Page 3</h2>
            </div>
        </div>
        <div id="badges-slidepage-4" page="4" class="psPage right">
            <div class="content">
               <h2>Page 4</h2>
            </div>
        </div>
    </div>

我可以将子元素添加到父元素

 var parentwrapper= $("<div/>").attr('id', 'wrapper');
    var firstDiv= $("<div/>").addClass("slidepage-container myPageContainerClass");
    var firstPage= $("<div/>").attr("id", "badges-slidepage-1").attr("page", "1").addClass("psPage center current");
    var contentDiv= $("<div/>").addClass("content");
    var firstcontent= $("<div/>").addClass("dealerNextTo dealerRectangleBox rectangleTopLeft").text("promptText");
      
    var secondPage = $("<div/>").attr("id", "badges-slidepage-2").attr("page", "2").addClass("psPage right");
    var secondContent= $("<div/>").addClass("dealerNextTo dealerRectangleBox rectangleTopLeft").text("promptText");
    
    var myFinalVar =  $(parentwrapper).append(firstDiv).append(firstPage).append(contentDiv).append(firstcontent).append(secondPage).append(secondContent);
    
    $(myFinalVar).appendTo('body');

但它仅添加到第一页 ContentDiv，

如何实现。 有任何想法吗？ （我是 Jquery 的新手）

Answer 1

问题是您正在链接append以添加您创建的元素，如下所示：

var myFinalVar = $(parentwrapper).append(firstDiv).append(firstPage).append(contentDiv)
                                 .append(firstcontent).append(secondPage).append(secondContent);

链式追加时，元素不会添加到链中的前一个元素，它们都直接添加到第一个元素。 在您的代码中，您将所有元素添加为parentwrapper直接子元素。

您需要将每个孩子（或一组兄弟姐妹）分别添加到他们的父母，例如，您只需要将firstDiv添加到parentwrapper ：

var myFinalVar = $(parentwrapper).append(firstDiv);

firstPage和secondPage被附加到同一个父级，因此您可以像这样链接它们：

$(firstDiv).append(firstPage).append(secondPage);  // appending to the SAME parent

工作示例：

 var parentwrapper = $("<div/>").attr('id', 'wrapper'); var firstDiv = $("<div/>").addClass("slidepage-container myPageContainerClass"); var firstPage = $("<div/>").attr("id", "badges-slidepage-1").attr("page", "1").addClass("psPage center current"); var contentDiv = $("<div/>").addClass("content"); var firstcontent = $("<div/>").addClass("dealerNextTo dealerRectangleBox rectangleTopLeft").text("Page 1 content div"); var secondPage = $("<div/>").attr("id", "badges-slidepage-2").attr("page", "2").addClass("psPage right"); var secondContent = $("<div/>").addClass("dealerNextTo dealerRectangleBox rectangleTopLeft").text("Page 2 content div"); var myFinalVar = $(parentwrapper).append(firstDiv); // chain appends to add to the SAME div $(firstDiv).append(firstPage).append(secondPage); $(firstPage).append(contentDiv); $(contentDiv).append(firstcontent); $(secondPage).append(secondContent); $(myFinalVar).appendTo('body');

 #wrapper { padding: 10px; background: #eee; } .slidepage-container.myPageContainerClass, .content, .psPage, .dealerNextTo{ border: 1px solid blue; padding: 10px;} .psPage { margin-bottom:20px; } .rectangleTopLeft { background: lightblue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

仅供参考，您似乎还缺少 secondPage 元素上的一个元素 - 它没有.content div。

Answer 2

以下是您可能想要尝试的内容：

// append first content to contentDiv
contentDiv.append(firstcontent);
// append contentDiv to firstPage
firstPage.append(contentDiv);
// append firstPage to firstDiv
firstDiv.append(firstPage);

// again append secondContent to secondPage
secondPage.append(secondContent);
firstDiv.append(secondPage);

var myFinalVar = $(parentwrapper).append(firstDiv);

$(myFinalVar).appendTo('body');