登录 | 注册

html:P元素不要乱嵌套

首页 > Web前端 > HTML5 2017-09-09 14:02:54 浏览次 共 条评论

收藏赞(分享
今天一个同事咨询我关于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的元素。

jQuery 代码:

$("p").filter(function(index) { return $("ol", this).length == 0;//这里明显有错误的.这样也不可能成功的. });
<p style="box-sizing: inherit; -webkit-tap-highlight-color: transparent; font-size: 12px; font-weight: 500; color: rgb(61, 70, 77); font-family: " pingfang="" sc",="" stheiti,="" "lantinghei="" "open="" sans",="" arial,="" "hiragino="" sans="" gb",="" "microsoft="" yahei",="" "wenquanyi="" micro="" hei",="" simsun,="" sans-serif;="" white-space:="" normal;="" background-color:="" rgb(248,="" 248,="" 248);"="">结果:
[ 

How are you?

]

其实这个是无法成功运行的.错误就在$("ol", this).length == 0;我开始以为修改为(this).has("ol").length==0就OK了,后来引发了新的问题.就是p元素包裹其他元素的问题.

我们可以看看这样的代码(让整个HTML里面只有此这些代码内容):


 

I'm nest in p element.

 

然后用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).

免责声明:本文来源于,由网友提供或网络搜集,仅供个人研究、交流学习使用,不涉及商业盈利目的。如有版权问题,请联系本站管理员予以更改或删除。优知网会定期发布Web前端相关趋势文章,包括 Web标准 HTML5 CSS JS JQuery Ajax 网页特效 等领域,敬请关注!

分享到
人收藏5 收藏
 
我要评价
 
 

咨询中心

优就业微信扫一扫
微信扫一扫

400-650-7353

加入官方微博