在迭代期间在每个容器中复制图像

Question

我想在不影响原始图像的情况下，在章节标题下克隆每个章节的 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();
    });
});

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

在迭代期间在每个容器中复制图像

Duplicating an image in each container during iteration

javascript

jquery

html

clone