如何定位文本中的文本<a>并將其包裝在跨度中？
所以原始代碼是：
<a href="#"><span class="accordionToggleCross"><img src="toggle.svg" title="Read more" alt="Read more"></span>
Job title #01
<span class="jobDescriptionSpan">Hello</span>
</a>
我希望它變成：
<a href="#"><span class="accordionToggleCross"><img src="toggle.svg" title="Read more" alt="Read more"></span>
<span class="jobTitleSpan">Job title #01</span>
<span class="jobDescriptionSpan">Hello</span>
</a>
我可以針對誰來定位文本并在其周圍添加跨度標簽？似乎無法針對的文本
uj5u.com熱心網友回復：
您可以使用.contents()which 回傳元素的所有子節點，包括文本節點。
$('a').contents()
然后我們迭代，檢查文本節點，抓取文本并將其替換為 HTML。
if (this.nodeType == 3) {
var u = this.nodeValue;
$(this).replaceWith('<span >' u '</span>');
}`
筆記：
- 只要您保持 HTML 的結構不變，它就可以作業。更改 HTML 將破壞此代碼
下面的作業示例
$('a').contents().each(function() {
if (this.nodeType == 3) {
var u = this.nodeValue;
$(this).replaceWith('<span >' u '</span>');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#"><span class="accordionToggleCross"><img src="toggle.svg" title="Read more" alt="Read more"></span>
Job title #01
<span class="jobDescriptionSpan">Hello</span>
</a> What I want it to become is:uj5u.com熱心網友回復：
//console.log(document.querySelector('a').childNodes[1]);
document.querySelector('a').childNodes[1].innerHTML = `<span>${document.querySelector('a').childNodes[1].wholeText}</span>`;
console.log(document.querySelector('a').childNodes[1]);
//to use in jquery
//$('a').childNodes[1].innerHTML = `<span>${$('a').childNodes[1].wholeText}</span>`;<a href="#"><span class="accordionToggleCross"><img src="toggle.svg" title="Read more" alt="Read more"></span>
Job title #01
<span class="jobDescriptionSpan">Hello</span>
</a>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/433726.html
標籤：jQuery
上一篇：使用jQuery應用用戶輸入更改
下一篇：選中多個單選框生成一個值