时间戳

首页 > 解决方案 > jQuery - 仅在一个容器中附加一个元素

jquery - jQuery - 仅在一个容器中附加一个元素

问题描述

我有很多弹出窗口（.popmake-content），在每个弹出窗口中，有两个按钮（.slick-arrow）我想附加到同一个弹出窗口中的另一个元素（.my_lightbox_navigation）。我试图这样实现它： 

jQuery('.popmake-content').each(function(){
    jQuery('.slick-arrow',this).appendTo('.my_lightbox_navigation',this);
});

但它会将所有 .slick-arrow 元素附加到 .my_lightbox_navigation 中。如何正确执行此操作？

标签： jqueryappendeach

解决方案

尝试以下操作，appendTo 没有上下文属性

jQuery('.popmake-content').each(function(i,v){ 
     var box = jQuery(v).find('.my_lightbox_navigation');
    jQuery(v).find('.slick-arrow').appendTo(box);
});


jQuery('.popmake-content').each(function(i,v){ 
     var box = jQuery(v).find('.my_lightbox_navigation');
    jQuery(v).find('.slick-arrow').appendTo(box);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popmake-content">
    <button class="slick-arrow"> button 11</button><button class="slick-arrow"> button 12</button>
    <div class="my_lightbox_navigation"></div>
</div>
<div class="popmake-content">
    <button class="slick-arrow"> button 21</button><button class="slick-arrow"> button 22</button>
    <div class="my_lightbox_navigation"></div>
</div>
<div class="popmake-content">
    <button class="slick-arrow"> button 31</button><button class="slick-arrow"> button 32</button>
    <div class="my_lightbox_navigation"></div>
</div>
<div class="popmake-content">
    <button class="slick-arrow"> button 41</button><button class="slick-arrow"> button 42</button>
    <div class="my_lightbox_navigation"></div>
</div>
<div class="popmake-content">
    <button class="slick-arrow"> button 51</button><button class="slick-arrow"> button 52</button>
    <div class="my_lightbox_navigation"></div>
</div>

推荐阅读