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

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

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

当你链追加时，元素不会添加到链中的 previous 元素，它们都直接添加到 first 元素。在您的代码中，您将所有元素添加为 parentwrapper.

的直接 children

您需要将每个 child（或一组兄弟姐妹）分别添加到他们的 parent，例如您只需要将 firstDiv 添加到 parentwrapper:

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

firstPage 和 secondPage 被附加到同一个 parent，所以你可以像这样链接它们：

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

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

JQuery append multiple child content to parent element

html

javascript

jquery

cordova