jquery - 从 jquery 中段落的每个子级获取文本

Question

这是我的 html 代码:

<div id="notes">
<table class="noborder">
   <tr><th class="noborder"><span>notes</span></th></tr>
   <tr><td>
       <p id="notes_p">

       <p>#1: dhhhhhhfdfffg
       </p>

       <p>　qqqqqqqqqqwwwwwwww wweeeeeeeeerr rrrrrrrtt tttttttt　　
       </p>

       <p>#2: asldkflaksdjflks, lasjdlfjsaldfjasldjfoajsdkfjaslkdjlkfasjdfwoidjfalk,zmncv,mznoqeworjoiejflaksdlfjwaf</p>
       </p>
    </td></tr>
 </table>
 </div>

我想要做的是获取#notes_p中每个段落的文本。我尝试过使用...$("#notes_p").html() 但我只得到一个空白。与 .text() 相同。为什么会发生这种情况？

如何正确获取innerHtml？因为我想在 paragraph 中使用 .wrap() ，然后再使用里面的文本。

Answer 1

段落不会嵌套，因此浏览器将通过展开嵌套来修复您的 HTML。

来自HTML4 specification :

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

来自 HTML5 :

Content model:
Phrasing content.

和phrasing content是纯字符数据并且 phrasing elements :

a or em or strong ...

请注意<p>不是短语元素。

浏览器(可能)最终会在 DOM 中得到以下结构:

<p id="notes_p"></p>
<p>#1: dhhhhhhfdfffg</p>
<p>　qqqqqqqqqqwwwwwwww wweeeeeeeeerr rrrrrrrtt tttttttt</p>
<p>#2: asldkflaksdjflks, lasjdlfjsaldfjasldjfoajsdkfjaslkdjlkfasjdfwoidjfalk,zmncv,mznoqeworjoiejflaksdlfjwaf</p> 

结果是#notes_p将为空并且 $('#notes_p').html()没有做任何有用的事情。您可以通过使用您最喜欢的 DOM 检查器检查页面的结构来验证这一点。

尝试替换<p id="notes_p">与 <div id="notes_p"> ，那么事情就会开始有意义。