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'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).