登录  /  注册

html:P元素不要乱嵌套

黄舟
发布: 2017-07-03 11:56:16
原创
1756人浏览过

今天一个同事咨询我关于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中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号