如何使用jQuery将文本设置为锚点和小标记？

您好我想设置文本既锚和小下面的代码片段如何使用jQuery将文本设置为锚点和小标记？

<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");

问题是，它不能够将文本设置为小标签它正在替换主播中的所有内容。提前感谢。

来源

2017-09-19 DHNK

id在上下文使用类中应该是唯一的 – guradio

1.标识应该是唯一的，你应该在使用'clone（）'后更新标签的标识。 2.使用''上的'text（）'将会完全删除里面的任何子元素。 – BenM

可能重复的[如何更改元素中的文本节点]（https://stackoverflow.com/questions/9956388/how-to-change-only-text-node-in-element） –

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

所以，你有2个解决方案：

环绕文本Step 1与span标签和更新自己的内容。
更新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>

来源

2017-09-19 08:29:51

您可以按照注释中所述替换第一个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>

来源

2017-09-19 08:37:01

更简单的解决方案，请尝试使用附加：

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>

来源

2017-09-19 08:39:22 SilverSurfer

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

这个工作。

来源

2017-09-20 08:35:33 DHNK

如何使用jQuery将文本设置为锚点和小标记？

回答

相关问题