Дублирование изображения в каждом контейнере во время итерации


Я хотел бы клонировать каждый раздел bgimage под названием раздела, не влияя на исходное изображение.

Вот мой HTML:

<div class="wrapper">
    <div class="section">
        <img class="bgimage" src="imagepath_1.jpg" alt="" />
        <h2>Title</h2>
        <!--clone goes here-->
    </div>
    <div class="section">
        <img class="bgimage" src="imagepath_2.jpg" alt="" />
        <h2>Title</h2>
        <!--clone goes here-->
    </div>
    <div class="section">
        <img class="bgimage" src="imagepath_3.jpg" alt="" />
        <h2>Title</h2>
        <!--clone goes here-->
    </div>
</div>

И мой код:

$(document).ready(function($) {
    $('.section').each( function (index, data) {    
        $(this).find('img.bgimage').first().clone().appendTo('.section h2').first();
    });
});
1   3   2015-08-18 01:45:59

1 ответ:

Одна из проблем в коде заключается в том, что appendTo добавляет дочерний элемент в контейнер. Чего вы действительно хотите, так это insertAfter.

Другая проблема заключается в том, что вы не ссылаетесь на каждый раздел в функции each. Вы должны использовать второй параметр функции.

Вот решение:

$(document).ready(function($) {
  $('.section').each(function (index, section) {    
    var image = $(section).find('img.bgimage').first(),
        title = $(section).find('h2').first();
    image.clone().insertAfter(title);
  });
});
.section {
  border: 1px solid #888;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
    <div class="section">
        <img class="bgimage" src="http://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" alt="" />
        <h2>Section 1</h2>
        <!--clone goes here-->
    </div>
    <div class="section">
        <img class="bgimage" src="http://jquery.com/jquery-wp-content/themes/jquery.com/i/feature-sprites.png" alt="" />
        <h2>Section 2</h2>
        <!--clone goes here-->
    </div>
    <div class="section">
        <img class="bgimage" src="http://jquery.com/jquery-wp-content/themes/jquery/images/jq-nav-icons.png" alt="" />
        <h2>Section 3</h2>
        <!--clone goes here-->
    </div>
</div>