javascript - 从定义的元素总数中获取第一个特定元素

Question

我有

<table id="ok">
<tr><div class="red">Red</div></tr>
<tr><div class="blue">Blue</div></tr>
<tr><div class="red">Red</div></tr>
<tr><div class="blue">Blue</div></tr>
<tr><div class="red">Red</div></tr>
<tr><div class="red">Red</div></tr>
<tr><div class="red">Red</div></tr>
<tr><div class="red">Red</div></tr>
<tr><div class="blue">Blue</div></tr>
<tr><div class="blue">Blue</div></tr>
.......
List goes on and on
</table>

我想获取表“ok”的前 10 个元素，从这 10 个元素中，我想获取类为“red”的所有元素在这种情况下，我只会得到 6 个元素。

我只走了这么远

var total = $("#ok tr"); var red = total.slice(1, 11);

Answer 1

您可以使用 jQuery 的 :lt extension 通过一个选择器来完成此操作和后代选择器:

var redsWithinFirst10Rows = $("#ok tr:lt(10) .red");

也就是说:“在具有 id ok 的元素中，选择从零开始的索引小于 10(即 0-9)的行，然后选择这些行的后代具有 .red 类。” (是的，jQuery 扩展选择器使用基于 0 的索引，而不是 CSS 中常见的基于 1 的索引。)

实例:

var redsWithinFirst10Rows = $("#ok tr:lt(10) .red");
redsWithinFirst10Rows.css("color", "red");

<table id="ok">
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="blue">Blue</div></td></tr>
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="blue">Blue</div></td></tr>
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="blue">Blue</div></td></tr>
<tr><td><div class="blue">Blue</div></td></tr>
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="blue">Blue</div></td></tr>
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="blue">Blue</div></td></tr>
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="red">Red</div></td></tr>
<tr><td><div class="blue">Blue</div></td></tr>
<tr><td><div class="blue">Blue</div></td></tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>

请注意，您必须修复标记，div 作为 tr 的直接子级无效。