将具有相同类名称的div附加到具有相同ID名称的div中

本文介绍了将具有相同类名称的div附加到具有相同ID名称的div中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试将具有相同类名称的div附加到具有相同ID名称的div中.

I'm trying to append divs with the same class name into a div with the same ID name.

所以我希望像这样附加div:

So I'd like divs to be appended like so:

<div id="originalsection"></div> <div id="all" class="newsection"> <div class="red all"> A </div> <div class="blue all"> B </div> <div class="green all"> C </div> <div class="red all"> D </div> <div class="blue all"> E </div> <div class="green all"> F </div> </div> <div id="red" class="newsection"> <div class="red all"> A </div> <div class="red all"> D </div> </div> <div id="blue" class="newsection"> <div class="blue all"> B </div> <div class="blue all"> E </div> </div> <div id="green" class="newsection"> <div class="green all"> C </div> <div class="green all"> F </div> </div>

这是原始HTML:

<div id="originalsection"> <div class="red all"> A </div> <div class="blue all"> B </div> <div class="green all"> C </div> <div class="red all"> D </div> <div class="blue all"> E </div> <div class="green all"> F </div> </div> <div id="all" class="newsection"></div> <div id="red" class="newsection"></div> <div id="blue" class="newsection"></div> <div id="green" class="newsection"></div>

我知道我可以使用JQUERY代码附加div

I know I can append the divs using the JQUERY code

$('div#originalsection div').each(function () { $(".newsection").append(this); });

我还可以使用代码选择某些班级

I can also select certain classes using the code

var sectionclass = $(this).attr('class').split(' ')[0];

或仅此一个.由于有两个类，因此我考虑将其分为[0]和[1].不确定是否有更简单的方法

or just this one. Since there's two classes, I thought about separating it into [0] and [1]. Not sure if there's an easier way

var sectionclass = $(this).attr('class');

我很难将这些代码放在一起.我刚开始使用JQuery，所以我希望提供任何解释！ 另外，我不确定为什么代码没有显示颜色.

I'm having trouble putting these codes together. I just recently started JQuery so I'd love any explanations! Also, I'm not sure why the colors aren't coming out for the code.

推荐答案

您已经有了组成部分，您只需要在每个循环中将它们放在一起即可.您唯一缺少的是让元素出现在#all下以及需要克隆的相关颜色容器下，这可以通过clone()完成.试试这个:

You've got the constituent parts, you just need to put them together within the each loop. The only thing you're missing is that to have the element appear under #all as well as the relevant colour container you'll need to clone it, which can be done with clone(). Try this:

var $all = $('#all'); $('div#originalsection div').each(function() { var $div = $(this); var sectionclass = $div.attr('class').split(' ')[0]; $('#' + sectionclass).append($div); $all.append($div.clone()); });

#red { color: red; } #green { color: green; } #blue { color: blue; }

<script src="cdnjs.cloudflare/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="originalsection"> <div class="red all"> A </div> <div class="blue all"> B </div> <div class="green all"> C </div> <div class="red all"> D </div> <div class="blue all"> E </div> <div class="green all"> F </div> </div> <div id="all" class="newsection"></div> <div id="red" class="newsection"></div> <div id="blue" class="newsection"></div> <div id="green" class="newsection"></div>