html: Do not nest P elements randomly

Today a colleague consulted me about jQuery's filter. He checked the documentation of jQuery1.7 made by UNREGISERED version of Easy CHM. He found that the instructions in it were too filtered and could not run successfully. . Later, I found that there were some bugs in some contents of the document that would mislead learners. At the same time, through this filter research, I discovered the problem of HTML p element. I had not paid attention to it before.

Let me take a look at jQuery1 first. 7 instructions made by UNREGISERED version of Easy CHM

Retain elements that do not contain ol among the child elements.

HTML code:

<p>
<ol>
<li>Hello</li>
</ol>
</p>
<p>How are you?</p>

jQuery code:

$("p").filter(function(index) { return $("ol", this).length == 0;//这里明显有错误的.这样也不可能成功的. });

Result:

[ <p>How are you?</p> ]

In fact, this cannot be run successfully. The error is in $("ol ", this).length == 0; I initially thought that changing it to (this).has("ol").length==0 would be OK, but later a new problem arose. It was the problem of the p element wrapping other elements.

We can look at this code (let the entire HTML contain only this code content):

<p><div>I&#39;m nest in p element.</div></p>

Then use jQuery to get the p element in this HTML.

alert($("p").length);

Because there is only one p. We should all expect the return result to be 1. But you can experiment. Chrome.Firefox.Opera.Safari.IE. All return 2.

Why?

Many people who are more careful than me and not as sloppy as me should know the reason. Then I will write it down to warn myself. This kind of problem is very easy for a careless person like me to make mistakes. It turns out that The P element represents a paragraph. It cannot contain block-level elements (including P itself).

The above is the detailed content of html: Do not nest P elements randomly. For more information, please follow other related articles on the PHP Chinese website!