- 首页
- 其他开发
- 将类名相同的div追加到id名相同的div中
将类名相同的div追加到id名相同的div中
[英] Append divs with the same class name into div with the same id name
本文介绍了将类名相同的div追加到id名相同的div中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将具有相同类名的 div 附加到具有相同 ID 名称的 div 中.
所以我希望像这样附加 div:
<div id="all" class="newsection"><div class="red all"></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 id="red" class="newsection"><div class="red all"></div><div class="red all">D</div>
<div id="blue" class="newsection"><div class="blue all">B</div><div class="blue all">E</div>
<div id="green" class="newsection"><div class="green all">C</div><div class="green all">F</div>
这是原始 HTML:
<div class="red all"></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 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
$('div#originalsection div').each(function(){$(".newsection").append(this);});
我也可以使用代码选择某些类
var sectionclass = $(this).attr('class').split(' ')[0];
或者只是这个.由于有两个类，我考虑将其分为 [0] 和 [1].不知道有没有更简单的方法
var sectionclass = $(this).attr('class');
<小时>
我无法将这些代码放在一起.我最近才开始使用 JQuery，所以我希望得到任何解释！另外，我不确定为什么代码没有出现颜色.
解决方案
你已经有了组成部分，你只需要将它们放在每个循环中.您唯一缺少的是让元素出现在 #all 以及相关的颜色容器下，您需要克隆它，这可以使用 clone() 完成.试试这个:
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 { 颜色:绿色；}#blue { 颜色:蓝色；}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="原始部分"><div class="red all"></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 id="all" class="newsection"></div><div id="red" class="newsection"></div><div id="blue" class="newsection"></div><div id="green" class="newsection"></div>
I'm trying to append divs with the same class name into a div with the same ID name.
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>
This is the original 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>
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];
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');
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.
解决方案
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屋！
