javascript - 需要使用 JavaScript 根据类名合并相邻的 HTML 节点

Question

我正在尝试完成以下任务。

说，如果我有

<div id='parent'>
<span class='a'>good</span><span class='a'>morning</span><span class='c'>world</span>
</div>

至，

<div id='parent'>
<span class='a'>goodmorning</span><span class='c'>world</span>
</div>

我想合并具有相同类名的相邻节点。

到目前为止，我唯一的想法是循环遍历每个节点并比较类。但是，我不知道这是否是唯一的解决方案。

任何想法或“新方法”都会非常有帮助:)

Answer 1

试试这个

类似问题:How to combine two divs that have the same class - jQuery

$(document).ready(function(){

    var endelement; 
    $.each($('.itemRow'), function(index, value) {
        if (index == 0)
            endelement = $(this);
        else
        {
            $.each($(this).children('.item'), function(i, v){
                endelement.append($(this));
            });
        }
    });

    $('.endProduct').append(endelement[0].outerHTML);
    console.log(endelement);
    console.log(endelement[0].outerHTML)

});

当然，这只能通过硬编码类名来实现，要动态获取类名并排列它们，我们必须使用 LoDash 或 Underscore 等库来进行处理。