如何使用 jQuery 将文本设置为锚和小标签？答案

【问题标题】：How to set text to both anchor and small tags using jQuery?如何使用 jQuery 将文本设置为锚和小标签？
【发布时间】：2017-09-19 08:05:02
【问题描述】：

您好，我正在尝试在下面的 sn-p 中将文本设置为锚点和小号

 <li id="TabA" class="done"><a href="#abc">Step 1<br /><small>Step</small></a></li>

还有Jquery代码

 var TabToggle = $("#TabA").clone();
TabToggle.find("small").text("First");
TabToggle.find("a").text("First")
TabToggle.find("a").attr("href", "#First" );

问题是它无法将文本设置为小标签。它正在替换锚内的所有内容。提前谢谢。

【问题讨论】：

id 在上下文使用类中应该是唯一的
1. ID 应该是唯一的，您应该在使用 clone() 后更新选项卡的 ID。 2. 在<a> 上使用text() 将完全删除其中的所有子元素。
How to change only text node in element的可能重复
最简单的选项是将“步骤 1”文本包装在一个跨度中并使用 $("a span").text("First") - 其他选项是使用 .contents()。查看链接的副本。

标签： jquery

【解决方案1】：

这是因为您在第 3 行调用：您正在替换包含 small 标记的 a 标记的全部内容。

所以你有两个解决方案：

用span 标签包围文本Step 1 并更新其内容。
更新a 标记的html 内容。你同时给它small的内容。

解决方案 1

var tab = $("#TabA");
var span = tab.find("span");
var small = tab.find("small");
var anchor = tab.find("a");
span.text("First");
small.text("First");
anchor.attr("href", "#First");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="TabA" class="done"><a href="#abc"><span>Step 1</span><br /><small>Step</small></a></li>

解决方案 2

var tab = $("#TabA");
var anchor = tab.find("a");
anchor.html("First<br><small>First</small>").attr("href", "#First");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="TabA" class="done"><a href="#abc">Step 1<br /><small>Step</small></a></li>

【讨论】：

【解决方案2】：

一个更简单的解决方案，尝试使用 append：

var val = $("#TabA > a").children().html("First");
$("#TabA > a").html('First').append(val).attr("href", "#First" );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="TabA" class="done">
    <a href="#abc">Step 1<br />
        <small>Step</small>
    </a>
</li>

【讨论】：

【解决方案3】：

您可以按照 cmets 中的说明替换第一个 DOM 文本子项，但如果您有更复杂的内容，它可能不起作用。

我建议您动态创建 DOM 树状结构。

var new_link = $("<a/>");
new_link.attr( "href", "#First" );
new_link.html( "First<br/>" );
new_link.append( $("<small/>").html( "First" ) );

$("#TabA a").replaceWith( new_link );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<li id="TabA" class="done">
  <a href="#abc">
    Step 1<br />
    <small>Step</small>
  </a>
</li>

【讨论】：

【解决方案4】：

 var TabToggle = $("#TabA").clone();
var cache = TabToggle.find("a").children();
TabToggle.find("a").text(GroupData.Text).append(cache);

这行得通。

【讨论】：