Question

这是我的HTML标记：

<div class="left-container">
   <div class="inner">content A here</div>
   <div class="inner">content B here</div>
   <div class="inner">content C here</div>
   <div class="inner">content D here</div>
</div>
<div class="right-container">
   <div class="inner"><span>content A2 here</span></div>
   <div class="inner"><span>content B2 here</span></div>
   <div class="inner"><span>content C2 here</span></div>
   <div class="inner"><span>content D3 here</span></div>
</div>

我试图将.left-container .inner移动到相应的.right-container .inner，就在</span>之后，使用appendTo()，以这种方式：

    jQuery('.left-container .inner').each(function(){

        // save the single reference for each .inner
        var $this = jQuery(this);

        // target destination element
        jQuery('.right-container .inner').each(function(){

            // adding a class to remove it later
            jQuery(this).addClass('not-added');

            // if this destination element has the not-added class
            if(jQuery(this).hasClass('not-added')) {

                // append the saved content
                jQuery($this).appendTo(this);

                // and remove the previously added class, so that it won't be targeted on the next iteration
                jQuery(this).removeClass('not-added');
            }
        });
    });

结果是：

所有目标div都会添加和删除类
所有内容都移至最新目标div

我无法理解，你能帮忙吗？

Answer 1

你可以迭代左容器中的内部div并以各种方式将它们插入到右容器中，但我发现最简单的方法是反向循环，这样你就不必担心管理索引了一旦你将第一个元素移开，第二个元素成为第一个元素等等。

以下代码使用content D here, content C here, content B here, content A here按顺序.reverse()循环遍历元素，并使用左容器div中的元素index将其插入右侧容器中的span之后使用.eq()

在右侧容器div中找到正确的位置

$($(".left-container div").get().reverse()).each(function() {
  $(this).insertAfter($('.right-container span').eq($(this).index()))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-container">
  <div class="inner">content A here</div>
  <div class="inner">content B here</div>
  <div class="inner">content C here</div>
  <div class="inner">content D here</div>
</div>
<div class="right-container">
  <div class="inner"><span>content A2 here</span></div>
  <div class="inner"><span>content B2 here</span></div>
  <div class="inner"><span>content C2 here</span></div>
  <div class="inner"><span>content D3 here</span></div>
</div>

Answer 2

为了消除一些复杂性，我会做这样的事情 https://jsbin.com/netaxacitu/edit?html,js,output

var copyData = function() {
  jQuery('.right-container .inner').each(function(index){
    var leftMatch = jQuery('.left-container .inner').eq(index).text()
    jQuery(this).text(leftMatch)
    console.log(index)
  });  
}

Answer 3

这对你有用。

jQuery('.right-container .inner').each(function(){
    var elem =  jQuery('.left-container .inner').first();
    elem.appendTo(this);
});

但至于我，我不喜欢这种编码方式。

Answer 4

如果我理解你的问题，你应该有两个课程，一方面可以验证左侧容器是否已经移动，另一方面，验证是否已经添加了正确的容器。

在您的情况下，它是最后一个拥有所有正确容器的左侧容器是正常的。

我无法测试代码，但此代码应该有效。

jQuery('left-container .inner').each(function(){

    var $left = jQuery(this);

    // target destination element
    jQuery('right-container .inner').each(function(){

        // if this destination element has not added something && moved element has not been moved
        if(!jQuery($left).addClass('already-moved') && !jQuery(this).hasClass('already-added')) {

            // append the saved content
            jQuery($left).appendTo(this);

            jQuery($left).addClass('already-moved');
            jQuery(this).addClass('already-added');
        }
    });
});

jQuery('left-container .inner').removeClass('already-moved');
jQuery('right-container .inner').removeClass('already-added');

将系列元素移动到相应的不同div

4 个答案: