MorkPork MorkPork - 1 year ago 48
jQuery Question

Hide not working when table is present

I've got a website which has a table with lots of data in it, in the head of the page I have the following code: -

$(function() {
$("td[colspan=3]").find("P").hide();
});


And when my main table has a
<P> test </P>
in there it correctly hides this (I have a button which then shows this and I know that works).

However, if I enter a sub table into that table between the P's like so

<td colspan="3">
<P>
<table>
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
</P>
</td>


The table is not hidden... What am I missing? I also tried

$("td[colspan=3]").find("P").find("table").hide();


But no dice here either...

Answer Source

This is cause because you have an invalide HTML.

The <p> tag cannot contain an other block inside, it is a text tag with the properties of a block. Once the broswer run hover a block tag inside the <p>, it close automaticly the <p> and opan the new tag.

If you inspect the dom here : http://jsfiddle.net/pqJTZ/, you'll see the <p> is empty.

The solution is to use a <div> instead.

This answer give you good links and a proper explanation.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download