進樣錨標記圍繞現有文本使用jQuery

我有一個頁面上一些HTML是內容如下：進樣錨標記圍繞現有文本使用jQuery

<h3 class="ms-standardheader"><a name="SPBookmark_History"></a>History</h3>

我運行一些JavaScript的網頁READY這裏我創建一個動態的超鏈接，我想以便在頁面呈現最終結果時：

<h3 class="ms-standardheader"><a name="SPBookmark_History"></a><a href="https://thissite.com/newurl" target="_blank"> History</a></h3>

H3的類名存在於多個頁面元素上。錨標籤的名稱SPBookmark_History是唯一的。

我該如何使用jQuery或直接使用javascript來完成此操作？

謝謝

來源

2017-02-13 user1149168

的可能的複製[如何創建現有元素圍繞一個新的錨標記（http://stackoverflow.com/questions/17161631/ how-to-create-a-new-anchor-tag-around-an-existing-element） –

您可以使用：

Attribute Equals Selector [name=」value」]：爲了選擇元素，因爲SPBookmark_History是唯一
.closest(selector)：獲取父級h3元素。
.contents()：獲取匹配元素集合中每個元素的子元素，包括文本和註釋節點。
filter-function：爲了得到鏈接後的文本
.wrap()：將HTML結構包裹在匹配元素集中的每個元素周圍。

代碼：

$('a[name="SPBookmark_History"]').closest('h3.ms-standardheader') 
 
.contents(). 
 
filter(function (idx, ele) { 
 
    return ele.nodeType == Node.TEXT_NODE 
 
}) 
 
.wrap($('<a/>', {href: "https://thissite.com/newurl", target: "_blank"})); 
 

 
console.log('Result is: ' + document.getElementsByClassName('ms-standardheader')[0].outerHTML);

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

 

 
<h3 class="ms-standardheader"><a name="SPBookmark_History"></a>History</h3>

來源

2017-02-13 20:18:12 gaetanoM

但錨的名稱是唯一的，所以它只適用於這一個不是所有，不是更好地使用$（'。ms-standardheader a'）？還是我錯了？ –

只需按照下面的代碼：

$(document).ready(function(){ 
    var link = $('a[name=SPBookmark_History]'); 
    link.attr('href','https://thissite.com/newurl'); 
    link.attr('target','_blank'); 
});

JSFIDDLE SAMPLE

來源

2017-02-13 20:05:36

請添加一些關於此代碼如何幫助OP的解釋。這將有助於提供未來觀衆可以從中學習的答案。請參閱[這個元問題及其答案]（http://meta.stackoverflow.com/q/256359/215552）瞭解更多信息。 –

謝謝Fahid。這增加了SPBookmark_History錨的href，但這不是要求的。我想在跟隨該錨點的H3的文本部分周圍添加一個新的錨點標籤。 – user1149168

進樣錨標記圍繞現有文本使用jQuery

回答

相關問題