选择多个集合的第一个元素

Question

我有一个尴尬的问题,因为继承了一堆真正非常糟糕的HTML格式.

基本上我有一些像这样的表行:

<tr class="odd">...</tr>
<tr class="odd">...</tr>
<tr class="odd">...</tr>
<tr class="even">...</tr>
<tr class="even">...</tr>
<tr class="even">...</tr>
<tr class="odd">...</tr>
<tr class="odd">...</tr>
<tr class="odd">...</tr>

我需要的是一个jQuery选择器,它将为我提供每个类块的第一个元素.那清楚了吗？我不知道怎么解释它.

所以在示例中我想要行1,4和7.

到目前为止,我已经选择了每个第n个孩子,但我现在意识到这不会起作用,因为在每个类块中总不会有相同数量的行.

任何帮助,你们可以给予它赞赏,一如既往:)

干杯!

Answer 1

您需要对:not()兄弟选择器使用一些战略用途:

$('tr.odd:first-child, tr.even:first-child, tr:not(.odd) + tr.odd, tr:not(.even) + tr.even')

这些tr:not(...) + tr...位选择任何tr直接位于tr不具有相同类名的元素.您不能动态地执行此操作(例如,使用某种通配符),但如果您单独指定每个类名,则完全可以.这将确保您只选择每个连续组中的第一个元素.

的原因:first-child是必需的伪很简单,因为+不匹配的第一个孩子,因为这意味着一个元素之间的关系和它的前置兄弟.请注意,这只是第一个:first-child帐户.你可以简单地替换,如果每个元素都只有一个类名,但为了清楚起见,我仍然指定它们. trtr.odd:first-child, tr.even:first-childtr:first-childtr

最后但同样重要的是,这可以兼作有效的CSS选择器,因此如果您愿意,也可以在样式表中使用它.

Answer 2

$('tr.odd:not(.odd+.odd),tr.even:not(.even+.even)')

这只是接受任何.odd不跟随另一个元素的元素.odd,以及.even不跟随另一个.even元素的任何元素.