Question

我有这段代码：

<tr id="row">
    <td id="col">
        <img>
        text
        <p></p>
    </td>
</tr>

我想从tr中取出每个“text”和<p>，将它们分别包装在<td>中，然后将它们添加到主<tr>。

最终的结果应该是这样的：

<tr id="row">
    <td id="col"><img></td>
    <td class="text-class">text><td>
    <td class="p-class"><p></p></td>
</tr>

我试图找到每个元素并将其包装在td中，但我做不到。

有什么建议吗？

Answer 1

尝试

var map = $('#col').replaceWith(function(){
    var map = $(this).contents().map(function(idx){
        var $td = $('<td />');
        if(this.nodeType == 3){
            if($.trim($(this).text()) == ''){
                return
            } else {
                $td.addClass('text-class');
            }
        } else if($(this).is('p')){
            $td.addClass('p-class');
        }

        return $td.append(this)
    });
    map.get(0).attr('id', this.id)
    return map.get()
});

演示：Fiddle

Answer 2

使用Javascript：

检索colElement列，检索包含id = "col"的代码（请参阅getElementById）
要阅读p类型的子项，请执行以下操作：var p = colElement.getElementsByTagName("p");（同样适用于所有其他类型的子项 - 有关信息，请参阅this link）

只需以这种方式迭代您检索的集合，并将它们作为标记的子项添加到<td>标记中（有关详细信息，请参阅the appendChild method）。

Answer 3

jQuery(function($){
    myTD = $("tr#row > td");
    myTD.children().each(function(){
        $this = $(this);
        wrapper = $("<td></td>");            
        wrapper
            .addClass($this.prop("tagName").toLowerCase()+"-class")
            .html($this)
            .appendTo(myTD.parent());
    });
    myTD.remove();
});

不完全是你想要的，但接近。您可以通过修改.each（function（index）{等等来添加逻辑以将原始td id添加到循环的第一个元素中。

如何将元素包装在a中，然后将td附加到tr

3 个答案: