html：P元素不要亂嵌套

今天一個同事諮詢我關於jQuery的filter進行過濾的問題.他查看了jQuery1.7 made by UNREGISERED version of Easy CHM的文檔資料.發現裡面過於filter的說明無法正常運行成功.後來發現次文檔的一些內容有一些bug會誤導學習者.同時透過這次filter的研究發現了HTML p元素的問題.之前居然一直沒有註意.

先給大家看看jQuery1. 7 made by UNREGISERED version of Easy CHM中的說明

保留子元素中不含有ol的元素。

HTML 程式碼:

<p>
<ol>
<li>Hello</li>
</ol>
</p>
<p>How are you?</p>

jQuery 程式碼:

$("p").filter(function(index) { return $("ol", this).length == 0;//这里明显有错误的.这样也不可能成功的. });

結果:

[ <p>How are you?</p> ]

其實這個是無法成功運行的.錯誤就在$("ol ", this).length == 0;我開始以為修改為(this).has("ol").length==0就OK了,後來引發了新的問題.就是p元素包裹其他元素的問題.

我們可以看看這樣的程式碼(讓整個HTML裡面只有此這些程式碼內容): 

<p><div>I&#39;m nest in p element.</div></p>

然後用jQuery去取此HTML裡面的p元素.

alert($("p").length);

因為只有一個p.我們都應該期待得到返回結果為1.但是你可以試驗.Chrome.Firefox.Opera.Safari.IE.統統返回2.

Why?

應該很多比我細心而且不像我這樣馬虎的人都知道原因.那我就自己記下來警示一下自己.這種問題對我這種粗心的人是非常容易犯錯的.原來P元素是不能包含區塊級元素（包括P自身）的.The P element represents a paragraph. It cannot contain block-level elements (including P itself). 

以上是html：P元素不要亂嵌套的詳細內容。更多資訊請關注PHP中文網其他相關文章！