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