得到第一个N <tr> 具有 <td> 小时候使用jQuery

Question

I have a <table> that has rows, first row is of-course header and other 10 non header rows. I want to get top 3 non-header rows (simply that has td child not th )

<table>
    <tr>
        <th> Header 1 </th>
        <th> Header 2 </th>
        <th> Header 3 </th>
    </tr>
    <tr>
        <td> Row 1 Cell 1 </td>
        <td> Row 1 Cell 2 </td>
        <td> Row 1 Cell 3 </td>
    </tr>
    <tr>
        <td> Row 2 Cell 1 </td>
        <td> Row 2 Cell 2 </td>
        <td> Row 2 Cell 3 </td>
    </tr>
</table>

I am using JQuery

var sideNotification = jq(jq.parseXML(response.d))
    .find('tr').has("td")
    .each(function (index) {
        if (index < 3) {
            return {
                leadNo: $(this).find("td:eq(0)").text(),
                product: $(this).find("td:eq(1)").text(),
                status: $(this).find("td:eq(2)").text()
            }
        }
    });
console.log(sideNotification.length);

But it still return 10 as count. How to solve it?

Answer 1

You can use combination of :has and :lt selectors.

$('tr:has(td):lt(3)').css('color', 'red');
   ^^^^^^^^^^^^^^^
   ^^               tr       -->  Select all tr elements
     ^^^^^^^        :has(td) -->  Select all tr elements having `td` as descendent
             ^^^^^  :lt(3)   -->  Get first three elements

 $('tr:has(td):lt(3)').css('color', 'red'); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <table> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> </table> 

Answer 2

You can use like this

$("tr:lt(4)").filter(function () {
   return $(this).find("td").length > 0;
})

1. :lt(4) will get all the tr elements whose index is less than 4.
2. Then you can eliminate the header by checking the count of td in each tr.

Fiddle