jQuery更改子元素文本

Question

我有一个jQuery函数，使用jQuery的"text"函数更改了一个包含在td元素内的文本。这个td元素内有一个" a"子标签，像这样。

<td class="v3"><a href="somelink">text to change</a>

要更改的文本由td类别标识。当我更改文本时，会丢失链接。问题是，如何在不影响子（a href）的情况下使用父元素更改文本？

感谢

- kamil

Answer 1

如果你拥有：

<td class="v3">
     <a href="somelink">text to change</a>
</td> 

然后在你的函数中应该有类似这样的内容：

$("td.v3").children("a").text("new text");

然而，这将选择所有直接作为 td 的子元素，且带有类名 .v3 的链接。在 children 后添加 .first() 应该会有所帮助：

$("td.v3").children("a").first().text("new text");

- Vlad Nicula

---

children 比 $("td.v3 a") 更快，因为后者被认为是进入 sizzle 的候选项 - http://www.myinkblog.com/2009/09/11/sizzle-a-look-at-jquerys-new-css-selector-engine/ - 运行需要额外的几毫秒时间 ;) - Vlad Nicula

Answer 2

将文本包裹在元素中，并更改中的文本。

<div id="foo">
    <span>bar</span>
    <a href="#">link</a>
</div>

...

$('#foo span').text('new text');

编辑：

或者使用$('td.v3 a').text("新文本")来更改锚中的文本，如果这是你想要做的。

- Tim

Answer 3

您只需更改另一个元素的文本。

<td>
   <a href="#">Link</a>
   <span>SomeText</span>
</td>

然后这样调用：

$('td').find('span').text('myNewText');

- Tejs

Answer 4

如果您想更改下拉菜单中的文本，可以通过为选项分配ID或类来实现。

     $('selector').children('option[id=option_id]').text('new text');

- CG_DEV

Answer 5

工作代码！！

使用子选择器>和伪类:first-child

const changeIt = () => {
  $('div.v3 > a:first-child').text('New Text');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="v3">
  <a href="somelink">text to change</a>
</div>

<button onclick="changeIt()">
  Click
</button>

- solanki...