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

如何解决jQuery将多个子内容附加到父元素

我必须使用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新手）

解决方法

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

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

在链追加时，元素不会添加到链中的 previous 元素中，而是直接添加到 first 元素中。在您的代码中，您将所有元素添加为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。

,

这是您可能想尝试的：

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