jQuery的不捡HTML

Question

So I have the following HTML

<div class="tmpl" id="query_tmpl">
<tr>
    <td><a href="#" class="group"></a></td>
    <td class="primary_email"></td>
</tr>
</div>

and the following JS:

 console.log($('#query_tmpl').html());

For some reason this only logs the 'a' tag. (Ex: http://jsfiddle.net/L8RQq/ )

Why does this happen and how do I get around it so that I can properly pick up the tr/td? I'm using jQuery 1.9.2 if that makes any difference.

Update: Yes, the markup is 'bad html', but the whole point of this question is how to get around that. Using the HTML present and without altering it, how can I grab the contents even though it's 'bad'?

Answer 1

You don't have table tags around your tr . Try this:

<div class="tmpl" id="query_tmpl">
    <table>
        <tr>
            <td><a href="#" class="group"></a></td>
            <td class="primary_email"></td>
        </tr>
    </table>
</div>

This will log the div's contents properly .

the reason it wasn't logging, is because the browser sees some invalid tr and td tags, and removes those, because they can only be in a table , leaving you with only the a .

If you can't change the markup, tell the person / company that wrote that markup to fix it. It's invalid HTML.

Answer 2

Make it like this

    <table class="tmpl" id="query_tmpl">
         <tr>
            <td><a href="#" class="group"></a></td>
            <td class="primary_email"></td>
         </tr>
    </table>

Then it will surely work correctly

Answer 3

如果要拾取tr或td，则可以使用css操作函数，例如children([selector]) ，其中selector最终是一个class