在段落 Jquery 中包裝純文本

Question

我有一個 h2 和一些文本：

<h2>Test</h2>
Lorem ipsum dolor hener ait

我需要將文本“lorem ipsum dolor hener ait”包裝在<p>元素中。 希望得到這樣的結果：

<h2>Test</h2>
<p>Lorem ipsum dolor hener ait</p>

目前，我有這個：

$('h2').each(function() {
     $(this).next().wrapAll('p');
});

但它不起作用。 我該如何解決這個問題？

Answer 1

您可以獲取父級的所有文本節點並用 ap 元素包裝它們。 我不知道這個解決方案是否適用於您的 html 結構。

contents()將返回所有節點，包括文本節點。 我使用的filter()確保只有包含字符的文本節點被包裝。 代碼對齊的空白也是文本節點。

 $('h2').each(function() { var textnodes = $(this).parent().contents().filter(function() { return this.nodeType === Node.TEXT_NODE && this.nodeValue.trim() !== ''; }).wrapAll('<p>'); });

 p { background-color: red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <h2>Test</h2> Lorem ipsum dolor hener ait </div>

Answer 2

您可以在沒有 jQuery 的情況下實現這一點。

文本是HTML 節點，因此您可以使用nextSibling訪問它們。

for (let h2 of document.querySelectorAll("h2")) {
    let text = h2.nextSibling;
    let p = document.createElement("p");
    h2.parentNode.insertBefore(p, text);
    p.appendChild(text);
}

如果它沒有按預期工作，問題是h2.nextSibling沒有返回文本節點，而是在元素和當前文本之間可能有另一個“不可見”文本節點。 只需使用 F12 檢查您的 HTML 並進行調試。