jquery - 获取一个div的html并将其注入(inject)到另一个div旁边

Question

我有一个这种格式的 HTML 结构:

<div class="wrap">
    <div class="name"></div>
    <div class="content">
        <div class="sub">123</div>
    </div>
</div>

<div class="wrap">
    <div class="name"></div>
    <div class="content">
        <div class="sub">abc</div>
    </div>
</div>

<div class="wrap">
    <div class="name"></div>
    <div class="content">
        <div class="sub">foo</div>
    </div>
</div>

正如您在上面看到的，我有 3 个相等的 div 元素，每个元素都有不同的 .sub div。当文档准备好时，如何使用 jQuery 获取 .sub div 的 HTML 内容并将其放在 .name div 旁边？

结果如下:

<div class="wrap">
    <div class="name"></div>
    <div class="sub">123</div>
    <div class="content">
        <div class="sub">123</div>
    </div>
</div>

<div class="wrap">
    <div class="name"></div>
    <div class="sub">abc</div>
    <div class="content">
        <div class="sub">abc</div>
    </div>
</div>

<div class="wrap">
    <div class="name"></div>
    <div class="sub">foo</div>
    <div class="content">
        <div class="sub">foo</div>
    </div>
</div>

Answer 1

试试这个:

$(".sub").each(function() {
    $(this).clone().insertAfter($(this).parent().siblings(".name"));
});

Example fiddle