将元素内容附加到与 jquery 同级的后代元素的内容中答案

【问题标题】：appending element contents with the contents of a descendant elements sibling with jquery将元素内容附加到与 jquery 同级的后代元素的内容中
【发布时间】：2015-04-27 19:08:53
【问题描述】：

我有以下 html...

<body>
    <section>
        <div class="clip">
            <header>first section header</header>
            <aside>first section aside</aside>           
        </div>
        <article>
            <div class="content">
            </div>
        </article>
        <article>
            <div class="content">
            </div>
        </article>
    </section>
    <section>
        <div class="clip">
            <header>second section header</header>
            <aside>second section aside</aside>           
        </div>
        <article>
            <div class="content">
            </div>
        </article>
        <article>
            <div class="content">
            </div>
        </article>
    </section>
</body>

使用 jQuery，我想在所有 .content div 中附加其后代部分 .clip div 的内容。

形成这个...

<body>
    <section>
        <div class="clip">
            <header>first section header</header>
            <aside>first section aside</aside>           
        </div>
        <article>
            <div class="content">
                <header>first section header</header>
                <aside>first section aside</aside>
            </div>
        </article>
        <article>
            <div class="content">
                <header>first section header</header>
                <aside>first section aside</aside>                
            </div>
        </article>
    </section>
    <section>
        <div class="clip">
            <header>second section header</header>
            <aside>second section aside</aside>           
        </div>
        <article>
            <div class="content">
                <header>second section header</header>
                <aside>second section aside</aside> 
            </div>
        </article>
        <article>
            <div class="content">
                <header>second section header</header>
                <aside>second section aside</aside> 
            </div>
        </article>
    </section>
</body>

目前我有这个用于 jquery

$(document).ready(function () {
    $(".content").prepend($(".content").parentsUntil("section").siblings("div").html());
});

它只选择文件首先 .clip divs 内容。如何形成选择器/jquery 行以对每个 .content div 使用正确的 .clip div？

【问题讨论】：

标签： jquery jquery-selectors jquery-traversing

【解决方案1】：

您可以使用each 循环播放剪辑，然后将它们的HTML 复制到同一`section 中的所有content 元素中：

$(".clip").each(function() {
  var $this = $(this);
  $this.closest("section").find(".content").append($this.html());
});

实例：

$(".clip").each(function() {
  var $this = $(this);
  $this.closest("section").find(".content").append($this.html());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
        <div class="clip">
            <header>first section header</header>
            <aside>first section aside</aside>           
        </div>
        <article>
            <div class="content">
            </div>
        </article>
        <article>
            <div class="content">
            </div>
        </article>
    </section>
    <section>
        <div class="clip">
            <header>second section header</header>
            <aside>second section aside</aside>           
        </div>
        <article>
            <div class="content">
            </div>
        </article>
        <article>
            <div class="content">
            </div>
        </article>
    </section>

【讨论】：

【解决方案2】：

试试这个：

$('section').each(function() { // Loop through each section
    var content = $(this).find('.clip').html(); // Get the inner html of .clip div inside this
    $(this).find('.content').prepend(content); // Add the contents for each .content div found inside this section
}

如果您更改整个 html 标记，只要保持类名不变，它也会起作用....

【讨论】：

【解决方案3】：

您可以使用回调到 .html() 来附加 .clip 的内部 Html 并使用 closest() 获取它。

$(document).ready(function () {
    $(".content").html(function(){
        return $(this).closest('section').find('.clip').html()
    });
});

Demo Fiddle

【讨论】：