Question

我需要更改此HTML代码：

<div id="data-table_paginate" class="dataTables_paginate paging_full_numbers">
    <a id="data-table_first" tabindex="0" class="first paginate_button paginate_button_disabled">Primero</a>
    <a id="data-table_previous" tabindex="0" class="previous paginate_button paginate_button_disabled">Anterior</a>
    <span><a tabindex="0" class="paginate_active">1</a><a tabindex="0" class="paginate_button">2</a></span>
    <a id="data-table_next" tabindex="0" class="next paginate_button">Siguiente</a>
    <a id="data-table_last" tabindex="0" class="last paginate_button">Último</a>
</div>

对此：

<ul id="data-table_paginate" class="dataTables_paginate paging_full_numbers">
    <li><a id="data-table_first" tabindex="0" class="first paginate_button paginate_button_disabled">Primero</a></li>
    <li><a id="data-table_previous" tabindex="0" class="previous paginate_button paginate_button_disabled">Anterior</a></li>
    <li><a tabindex="0" class="paginate_active">1</a></li>
    <li><a tabindex="0" class="paginate_button">2</a></li>
    <li><a id="data-table_next" tabindex="0" class="next paginate_button">Siguiente</a></li>
    <li><a id="data-table_last" tabindex="0" class="last paginate_button">Último</a></li>
</ul>

您可能会看到div仅更改ul元素并将<a>内的每个div换行li（同时退出span并改为li。我不是jQuery专家，但我很确定这很容易，有什么能帮到我这里的吗？

PS：代码是动态的，所以也许它只有一个，但也许会有几个

Answer 1

使用jQuery非常简单：

$('div#data-table_paginate a').wrap('<li>');

注意到你中间有<span>，那么你需要在没有选择器的情况下使用.children()。

如果您想使用普通的javascript进行下面的操作，那么这是一个适用于1级孩子的工作解决方案，并且它具有很强的可重构性。

var nodes = document.querySelector('#data-table_paginate');
var newHTML = "<ul>";
for(var i = 0; i < nodes.children.length; i++) {
    if(nodes.children[i].children.length > 0) {
        for(var j = 0; j < nodes.children[i].children.length; j++) {
            newHTML += "<li>"+ nodes.children[i].children[j].innerHTML +"</li>";
        }    
    } else {
        newHTML+="<li>"+nodes.children[i].innerHTML+"</li>";
    }
}
newHTML += "</ul>";
nodes.innerHTML = newHTML;

制作fiddle here

我已更新我的解决方案以符合您的规格。注意：使用jQuery会阻碍您需要的大量嵌套代码。

Answer 2

您可以使用wrap功能：

$(function() {
    $('#data-table_paginate a').wrap('li');
});

这将找到data-table_paginate div中的所有锚点并将它们包装在li元素中。

换行<a> elements in a <li></li></a>

2 个答案: