How to iterate only table top level <tr> tags

Question

Hi, I want only top-level iteration to mean child table tags. Below is my HTML

<table id="tab1"> ---> <tr> <td> <table> <tr><td></td></tr> <tr><td></td></tr> </table> </td> </tr> ---> <tr><td></td></tr> ---> <tr><td></td></tr> </table> 

If I repeat all tr ​​tags using the code below

  $('#tab1 tr').each(function() { // This will iterate through all the <tr> ( 5 tags).. }); 

But I want to iterate through s, which I mentioned, with a> mark. You can use the script below to put your hands on
http://jsfiddle.net/AzJRp/1/

Answer 1

Some browsers will "fix" your HTML to include <tbody> :

 <table id="tab1"> <tbody> <tr> <td> <!-- ... --> </td> </tr> </tbody> </table> 

If possible, add <tbody> to your HTML yourself, and then you can reliably use:

 $('#tab1 > tbody > tr').each(function() { // ... }); 

Demo: http://jsfiddle.net/Qw2CJ/

If you don't enter <tbody> yourself, $('#tab1 > tr') will work in some browsers, while others will need $('#tab1 > tbody > tr') . If you add <tbody> yourself, you can use the same simple CSS selector everywhere.

Answer 2

Based on the above answers / comments, I understand that most browsers can add tbody tags. I do not think it is a good idea to add tbody programmatically to make it work with the '# tab1> tbody> tr' selector.

It is better to use Multiple Selectors to solve the problem. (I have not tested it. Hope someone checks it out and changes the answer or adds a comment here.)

 $('#tab1 > tbody > tr , #tab1 > tr').each(function() { // ... }); 

Answer 3

This will work:

 $("#tab1 > tbody > tr").each(function(index, value) { //this iterates through only 3 elements. });