换行<td><a>标记，同时避免嵌套元素

Wrap <td> text in <a> tag while avoiding nested elements

本文关键字：gt lt 元素 嵌套 标记 td 换行      更新时间：2023-09-26

我正试图使用jQuery将<td>元素的文本包装在<a>元素中，但在<td>中也嵌套了一个<span>元素，我不想将其包含在<a>元素中。

这里有一个链接到一个jsfiddle的例子，我的问题

<style>
  td {
    background-color: #bada55;
  }
</style>
<table>
  <tr>
    <td class="item"><span> + </span>First</td>
    <td class="item"><span> + </span>Second</td>
    <td class="item"><span> + </span>Third</td>
  </tr>
</table>
$(".item").wrapInner("<a href='#'/>");

您可以用包装span旁边的文本

$('.item').contents().filter(function() {
  return this.nodeType == 3;
}).wrap("<a href='#'/>");
td {
  background-color: #bada55;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="item"><span> + </span>First</td>
    <td class="item"><span> + </span>Second</td>
    <td class="item"><span> + </span>Third</td>
  </tr>
</table>

这样做的目的是用类项在表单元格上循环，获取单元格的内容（一个span元素和一个文本节点），只返回文本节点，并用锚将其包裹起来。

相关文章：