jQuery的：内更换每个TD标签

Question

我想更换table具有内部有一个包裹的a标签每td：

$("td").each(function() { 
 
    if ($(this).find("a").length) { 
 
    var link = $(this).find("a").attr('href'); 
 
    $("a").contents().unwrap(); 
 
    var content = $(this).html(); 
 
    $(this).replaceWith("<td class='link'><a href='" + link + "'> " + content + "</a></td>"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <p>Some text</p> 
 
     <p>Some <a href="http://www.mynewlink.tld">more text</a></p> 
 
    </td> 
 
    <td> 
 
     <p>Some text</p> 
 
     <p>Some <a href="http://www.mynewotherlink.tld">more text</a></p> 
 
    </td> 
 
    </tr> 
 
</table>

但只有它做第一个。但我希望每一个都被替换。 任何人都可以处理这个？

Answer 1

您可以使用wrapInner以将td中的所有内容都包含为a。你的$("a").contents().unwrap();实际上是破坏你的代码，因为它解开每个a标签而不是一个。因此，在包装所有内容后，您必须手动定位这些a标签。

查看下面的工作示例。

$("td").each(function() { 
 
    if ($(this).find("a").length) { 
 
    var link = $(this).find("a").attr('href'); 
 
    $(this).wrapInner("<a href='" + link + "'/>"); 
 
    $(this).addClass("link"); 
 
    } 
 
}); 
 
$("td a a").contents().unwrap();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <p>Some text</p> 
 
     <p>Some <a href="http://www.mynewlink.tld">more text</a></p> 
 
    </td> 
 
    <td> 
 
     <p>Some text</p> 
 
     <p>Some <a href="http://www.mynewotherlink.tld">more text</a></p> 
 
    </td> 
 
</tr> 
 
</table>

Answer 2

在你的代码的问题是

$("a").contents().unwrap(); 

当它执行它第一次更换所有的锚标记元素成纯文本。所以下一次迭代它不能找到任何锚标签。这就是为什么它只发生在第一个元素上。因此，改变你的代码像下面

$(this).find("a").contents().unwrap(); 

DEMO

Answer 3

在这里，你去..总结所有的孩子“一个”的标签，而不是它的所有包装成一个标签。

$("td").each(function() { 
 
    var anchor = $(this).find("a"); 
 
    if (anchor.length) {   
 
     var link = anchor.attr('href'); 
 
     anchor.contents().unwrap(); // unwrap link tag 
 
     $(this).children().wrapInner("<a href='" + link + "'/>");   
 
     $(this).addClass("link"); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
    <td> 
 
     <p>Some text</p> 
 
     <div>Some text</div> 
 
     <p>Some <a href="http://www.mynewlink.tld">more text</a></p> 
 
    </td> 
 
    <td> 
 
     <p>Some text</p> 
 
     <p>Some <a href="http://www.mynewotherlink.tld">more text</a></p> 
 
    </td> 
 
</tr> 
 
</table>