选择儿童元素而不是后代

如何选择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>

来源

2011-07-25 stavarotti

请注意，您的表格标记需要更新。你不能在tr标签中嵌套tr标签。 –

标记更新。 – stavarotti

您的HTML不合法。在之前你需要一个'

'。 –

回答

你可以这样说：

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

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

来源

2011-07-25 21:39:53 Emmanuel

以上声明仍然会选择产生6个计数的儿童子女。 – stavarotti

它不是CSS 3选择器。它实际上是指定自CSS 2. – jwueller

嗯......它不应该，但试试这个警报（$（'.someClass> tbody> tr'）.length）; ' – Emmanuel

可以使用child selector>，这将只选择直接后裔：

$('.someClass > tbody > tr')

来源

2011-07-25 21:41:20 jwueller

又名“儿童选择器” – Claudio

除了Element > Child选择，也有个children方法：

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

来源

2011-07-25 21:43:15

你可能只是无法使用jquery并且有element.children.length甚至element.childElementCount。

来源

2011-07-25 21:55:36 qw3n

选择儿童元素而不是后代

回答

相关问题