jquery - 按另一个顺序将类添加到 Div

Question

我有 2 个父级 div，其中包含相同数量的子级，如下所示；

<div class="parent_1">
    <div class="dir one">...</div>
    <div class="dir two">...</div>
    <div class="dir three">...</div>
    ....
</div> 

<div class="parent_2">
    <div class="dir">...</div>
    <div class="dir">...</div>
    <div class="dir">...</div>
    ...
</div> 

我需要以相同的顺序将 parent_1 孩子 ( ) 的支持类添加.one, .two, .three到 parent_2 的孩子。

孩子的数量将动态创建，并且父母双方将拥有相同的数量。

Answer 1

尝试

var $children1 = $('.parent_1').children();

$('.parent_2').children().each(function(idx){
    $(this).addClass($children1.eq(idx).attr('class').replace(/dir\s+/, ''))
})

演示：小提琴

我可能会看到的另一种方式是

var srcs = $('.parent_1').children().map(function(){
    return this.className.replace(/dir\s+/, '')
}).get();

$('.parent_2').children().each(function(idx){
    $(this).addClass(srcs[idx])
})

演示：小提琴

Answer 2

$('.parent_1 div').each(function(){
    $('.parent_2').find('div:eq(' + $(this).index() + ')').attr('class', $(this).attr('class'))
})