Question

我有以下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内容。如何形成selector / jquery行以为每个.content div使用正确的.clip div？

Answer 1

您可以使用each循环剪辑，然后将HTML复制到同一`部分中的所有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>

Answer 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标记，只要您保持类名不变，它也会起作用....

Answer 3

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

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

<强> Demo Fiddle

使用jquery附加元素内容和子元素兄弟的内容

3 个答案: