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

这是我的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>

结果是：

• 所有目标div都将添加和删除该类
• 所有内容都将移动到最新的目标div

---

我想不出来，你能帮忙吗？

你可以迭代左侧容器中的内部div，然后以各种方式将它们插入右侧容器中，但是我发现反向循环是最容易的，这样你就不必担心管理索引了，当你把第一个元素移到一边时，原来的第二个元素就变成了第一个

下面的代码使用

.reverse（）

按

此处为content D，此处为content C，此处为content B，此处为content A

的顺序在元素上循环，并使用元素的

索引将其插入右容器div中的span后，以在右容器div中找到正确的位置，使用
.eq（）


$（$（“.left container div”）.get（）.reverse（））.each（function（））{
$（this.insertAfter（$（'.right container span'）.eq（$（this.index（）））
})

这里是内容A
这里是内容B
这里是内容C
这里的内容是D
这里是内容A2
这里是内容B2
这里是内容C2
内容D3在这里
为了消除一些复杂性，我会这样做

这对你有用

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

但对我来说，我不喜欢这种类型的编码。
如果我了解您的问题，您应该有两个类来验证左侧容器是否已移动，另一方面验证右侧容器是否已添加

在您的情况下，最后一个左容器包含所有右容器是正常的

我无法测试代码，但此代码应该可以工作

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');

将类“notadded”添加到当前元素，然后下一行是if语句，检查当前元素是否具有类“notadded”。似乎是一个奇怪的实现。左容器中的
内部
的数量是否总是与右容器中的相同？这是您所追求的结果吗？是的，数字总是相同的，并且列中有1:1的匹配。我不熟悉jQuery，因为我通常是在服务器端工作的，所以提前对您的问题表示歉意mistakes@j08691对它应该是这样工作的，我正在尝试实现它；）谢谢，但在我的例子中仍然有一个问题：结果被移动了1个元素。所以结果是：*内容A2 |内容B*内容B2 |内容C*内容C2 |内容D*内容D2 |……空。。。为什么它会这样？你能在JSFIDLE中创建问题吗？我认为它与我在右列中没有看到的隐藏div有关，它改变了反向计数。我刚刚在右侧的同一位置添加了一个虚拟div，现在一切都正常了；）我现在有一个匹配的div数，但是我注意到我必须这样写：.eq（-jQuery（this.index（））；否则脚本将无法在右div中找到匹配的元素。为了保持正确的顺序，我必须以相反的顺序打印元素，否则我会得到左上的最后一个元素=右上的第一个元素。我也不明白为什么，这很糟糕，但我是被带到这里来的，不是我的工作：）无论如何，你的代码会将每个目标的第一个元素复制4倍。@frafor我更喜欢在目标元素和源元素之间映射。在这种情况下，它可以防止将来更改标记时出错。类似于数据源id和数据目标id。我更喜欢直接从服务器生成正确的代码，但这是一种非常特殊的情况，有许多未绑定的插件绑定在一起，我真的没有时间对这样构建的东西进行反向工程：如果我只接触一行代码，它可能会下降——在非常平庸的任务中确实发生过两次。这就是为什么我决定在所有东西上做一个修复。不干净，不瘦，但它不会使整个大便不稳定
jQuery('.right-container .inner').each(function(){
    var elem =  jQuery('.left-container .inner').first();
    elem.appendTo(this);
});

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');