Question

我有一个jquery函数，它使用jquery“text”函数更改元素内的文本。在这个td元素里面是这样的子“a”标签。

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

要更改的文本由td类标识。当我更改文本时，我丢失了链接。问题是如何使用父元素更改文本而不触及子元素（a href）？

感谢名单

Answer 1

如果你有：

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

然后在你的功能中你应该有这样的东西：

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

但是，这将选择与类.v3的tds的直接子节点的所有链接。在孩子们之后添加.first（）应该有所帮助：

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

Answer 2

将文本换行到span元素，然后更改范围中的文本。

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

...

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

编辑：

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

Answer 3

您只需更改其他元素的文字即可。

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

然后像这样调用：

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

Answer 4

如果您想更改选择菜单中的文字，可以通过提供ID或类选项来完成此操作。

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

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>

jQuery更改子文本

5 个答案: