Question

我已经好几天了，我希望你们能帮助我。

我需要创建一个看起来像这样的DOM。

<div id="nestedAccordion">
<h2>Walt Disney World</h2>
    <div>
        <h3>Magic Kingdom</h3>
        <div>
            <ol>
                <li>one</li>
            </ol>
        </div>
        <h3>Epcot</h3>
        <div>
            <ol>
                <li>two</li>
            </ol>
        </div>
        <h3>Hollywood Studios</h3>
        <div>
            <ol>
                <li>three</li>
            </ol>
        </div>
   </div>
</div>

我试过了：

$('#sidebar')
 .append($('<div/>').attr('id', 'nestedAccordion').html('<h2>Walt Disney World</h2>')
   .append($('<div/>').html('<h3>Magic Kingdom</h3>')
    .append($('<div/>').html('<ol><li>one</li></ol>')))
   .append($('<div/>').html('<h3>Epcot</h3>')
    .append($('<div/>').html('<ol><li>two</li></ol>')))
   .append($('<div/>').html('<h3>Hollywood Studios</h3>')
    .append($('<div/>').html('<ol><li>three</li></ol>')))
 )

但我只得到了＃34;沃尔特迪斯尼世界＆＃34;和＃34;神奇王国＆＃34;。其余的＆＃34; Epcot＆＃34;或者＆＃34;好莱坞影城＆＃34;永远不会显示。另外，我尝试了几种JQuery组合＆＃39;在＆＃39;，＆＃39; insertAfter＆＃39;和克隆（）＆＃39;没有运气。 stackoverflow上的所有可用示例仅演示了如何创建嵌套div，但没有嵌套div与sibilings的示例。谢谢！

编辑：非常感谢你的帮助。我没有提到我需要这个DOM用于JQuery手风琴菜单（不是JqueryUI）。 Bowheart解决方案与手风琴完美配合。我不知道为什么guest271314解决方案没有。无论如何，非常感谢！

Answer 1

取出第一个.append($('<div/>')。 e.g。

$('#sidebar').attr('id', 'nestedAccordion').html('<h2>Walt Disney World</h2>')
.append($('<div/>').html('<h3>Magic Kingdom</h3>')
  ....

JSFiddle Here

Answer 2

修改，更新

尝试

var container = $("<div>", {
    "id": "nestedAccordion",
        "html": $("<h2>", {
        "text": "Walt Disney World"
    })
    .add(
    $("<div>", {
        "html": $("<h3>", {
            "text": "Magic Kingdom"
        })
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "one"
                })
            })
        }))
        .add(
        $("<h3>", {
            "text": "Epcot"
        }))
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "two"
                })
            })
        }))
        .add(
        $("<h3>", {
            "text": "Hollywood Studios"
        })
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "three"
                })
            })
        })))
    }))
});

$("#sidebar").replaceWith(container);

var container = $("<div>", {
    "id": "nestedAccordion",
        "html": $("<h2>", {
        "text": "Walt Disney World"
    })
    .add(
    $("<div>", {
        "html": $("<h3>", {
            "text": "Magic Kingdom"
        })
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "one"
                })
            })
        }))
        .add(
        $("<h3>", {
            "text": "Epcot"
        }))
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "two"
                })
            })
        }))
        .add(
        $("<h3>", {
            "text": "Hollywood Studios"
        })
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "three"
                })
            })
        })))
    }))
});

$("#sidebar").replaceWith(container);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar"></div>

使用jquery创建与兄弟姐妹的嵌套div

2 个答案: