码迷,mamicode.com
首页 > 其他好文 > 详细

关于p标签的嵌套问题

时间:2014-08-10 15:22:40      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   java   io   for   2014   

今天群里问了一个p的问题,初看我觉得恩这么简单我应该知道。

他代码如下:

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
</head>
<body>
<body>
<div>
    <p><p></p></p>
 
</div>
</body>
</body>
</html>

<script>
$(function(){
     var p = $("p");
     alert(p.length);
});
</script>

 

  然后输出了3

我怎么看也是2啊,然后我就让他把代码发给我看看,后来别人说p嵌套会有问题,我就试了一下其它标签  发现i,a ,div都是好的,

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
</head>
<body>
<div>
    <div>1<div>2</div>3</div>
</div>
</body>
</html>
<script>
    $(function() {
        var $targetName = $(div);
       console.log(i len:,$targetName.length);

        for(var i=0;i<$targetName.length;i++) {
            console.log($targetName.eq(i).html());
        }
    });
</script>

bubuko.com,布布扣

然后我突然想起,p里面是不能嵌套块级的,p自己也是块级,
例如<p>1<p>2</p>3</p>
他最后会被解析为
<p>1</p>
<p>2</p>
<p</p>

然后我继续想,如果我把p的style设置为inline呢?

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <style>
        p {
            display: inline;
        }
    </style>
</head>
<body>
<div>
    <p>1<p>2</p>3</p>
</div>
</body>
</html>
<script>
    $(function() {
        var $targetName = $(p);
       console.log(p len:,$targetName.length);

        for(var i=0;i<$targetName.length;i++) {
            console.log($targetName.eq(i).html());
        }
    });
</script>

恩  还是会输出3的, 这个应该是和浏览器有关系的。

ps:问题虽小,但是我今天才知道,略掉脸,囧。

bubuko.com,布布扣

关于p标签的嵌套问题,布布扣,bubuko.com

关于p标签的嵌套问题

标签:style   blog   http   color   java   io   for   2014   

原文地址:http://www.cnblogs.com/skyweaver/p/3902710.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!