appending element contents with the contents of a descendant elements sibling with jquery

Question

I have the following 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>

Using jQuery I want to append all the .content divs with the contents of their descendant sections .clip div.

forming this...

<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>

currently I have this for the jquery

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

which only selects the documents first .clip divs contents. How do I form the selector/jquery line to use the proper .clip divs for each .content div?

score 1 · Answer 1 · answered Apr 27 '15 at 09:41

You can use each to loop through the clips, and then duplicate their HTML into all content elements within the same `section:

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

Live example:

$(".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>

score 0 · Answer 2 · answered Apr 27 '15 at 09:40

Try this:

$('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
}

It will also work if you change your entire html markup, as soon as you leave the class names unchanged....

Shaunak D · Answer 3 · 2015-04-27T09:47:51.463

0

You could use callback to .html() to append inner Html of .clip and get it by using closest().

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

Demo Fiddle

edited Apr 27 '15 at 09:47

answered Apr 27 '15 at 09:42

Shaunak D

20,588
10
46
79

appending element contents with the contents of a descendant elements sibling with jquery

3 Answers3