选择子元素而不是后代

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 );

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

Answer 2

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

$('.someClass > tbody > tr')

Answer 3

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

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

Answer 4

您可以不使用Jquery并拥有element.children.length甚至element.childElementCount。