使用 jQuery 將錨標記轉換為純文本

Question

我的 HTML 到 PDF 進程的 output 遇到問題，其中包含tel:協議的錨標記在單擊時會出現錯誤。 事實證明，這些hrefs被視為相對 URL，與mailto:被識別為它自己的東西不同。

我想如果我可以直接定位這些元素，我可以獲取它們的內容，完全隱藏<a>標簽，只在新元素中顯示內容。 或許這是想太多了吧？

這是我去的地方： https://jsfiddle.net/BIPC_Sydor/yL8suwno/1/

我想嘗試在特定的 div（菜單類）中定位<a>標記的每個實例。 然后將每個實例的內容復制到一個新的<p>標記（pdf 類）中。 從那里我可以隱藏舊的<a>並將新的<p>風格化。 不幸的是，它在我預期的更多實例中輸出了兩個錨點的內容。 這是可行的嗎？

我的小提琴代碼：

HTML

<div class="menu">
  <a href="page.html">Page 1</a>
  <a href="page2.html">Page 2</a>
</div>

JS

$( '.menu a' ).each(function( i ) {
  var res = $('.menu a').text();
  $('.menu a').after('<p class="pdf">'+ res +'</p>');
});

Answer 1

您也可以使用after(function)和 chain hide()來隱藏<a>

 $('.menu a').after(function() { return $('<p>', {class: 'pdf', text: $(this).text()}) }).hide()

 p.pdf { color: red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="menu"> <a href="page.html">Page 1</a> <a href="page2.html">Page 2</a> </div>

Answer 2

在 each() 方法中也使用value ，並使用值引用來更新節點，否則它將更新所有節點。

$( '.menu a' ).each(function( index,value ) {
  var res = $(value).text(); // value is for current iteration
  $(value).after('<p class="pdf">'+ res +'</p>');
  // do something else...
});

參考這里： https://api.jquery.com/jquery.each/