javascript - 使用 jQuery 获取第一个以 为子级的 N

Question

我有一个 <table>有行，第一行当然是标题和其他 10 个非标题行。我想获得前 3 个非标题行(只是有 td child 没有 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>

我正在使用 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);

但它仍然返回 10 作为计数。如何解决？

Answer 1

您可以使用 :has 的组合和 :lt选择器。

$('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>