如何使用jQuery將文本設置爲錨點和小標記？

Question

您好我想設置文本既錨和小下面的代碼片段

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

問題是，它不能夠將文本設置爲小標籤它正在替換主播中的所有內容。提前感謝。

Answer 1

這是因爲您在第3行的呼叫：您將替換包含small標記的a標記的全部內容。

所以，你有2個解決方案：

1. 環繞文本Step 1與span標籤和更新自己的內容。
2. 更新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>

Answer 2

您可以按照註釋中所述替換第一個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>

Answer 3

更簡單的解決方案，請嘗試使用附加：

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>

Answer 4

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

這個工作。