选择子元素而不是子元素

Question

如何选择tbody的子代而不是其后代？例如，使用以下jQuery语句：

alert( $( '.someClass tbody tr' ).length );

使用下面的示例html将产生长度为2的结果：

<div>
  <table class='someClass'>
    <tbody>
      <tr>
        <td>
          <span>cell 1-1</span>
            <table>
              <tbody>
                <tr class='level-2'>
                  <td>
                    <span>cell 1-2</span>
                    <table>
                      <tbody>
                        <tr class='level-3'>
                          <td><span>cell 1-3</span></td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <span>cell 2-1</span>
            <table>
              <tbody>
                <tr class='level-2'>
                  <td>
                    <span>cell 2-2</span>
                      <table>
                        <tbody>
                          <tr class='level-3'>
                            <td><span>cell 2-3</span></td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

Answer 1

你可以这样做：

alert( $( '.someClass > tbody > tr' ).length );

这实际上是一个jQuery很好地实现的css2选择器。

Answer 2

您可以使用child selector >，它将只选择直接后代：

$('.someClass > tbody > tr')

Answer 3

除了Element > Child选择器之外，还有children方法：

var element = $("#element");
var children = element.children("tr");