将具有相同类名称的div附加到具有相同ID名称的div中 [英] Append divs with the same class name into div with the same id name
问题描述
我正在尝试将具有相同类名称的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="https://cdnjs.cloudflare.com/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>
这篇关于将具有相同类名称的div附加到具有相同ID名称的div中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!