добавление содержимого элемента к содержимому элемента-потомка с помощью jquery

У меня есть следующий 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, я хочу добавить все элементы div .content с содержимым их разделов-потомков .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 div. Как мне сформировать строку selector/jquery, чтобы использовать правильные элементы div .clip для каждого элемента div .content?


jquery jquery-selectors jquery-traversing
person Kip Kackler    schedule 27.04.2015    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете использовать 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>

person T.J. Crowder    schedule 27.04.2015

arrow_upward
0
arrow_downward

Попробуй это:

$('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, как только вы оставите имена классов без изменений....

person Balázs Varga    schedule 27.04.2015

arrow_upward
0
arrow_downward

Вы можете использовать обратный вызов .html(), чтобы добавить внутренний HTML-код .clip и получить его. с помощью closest().

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

Демонстрационная скрипта

person Shaunak D    schedule 27.04.2015