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

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>

我想获取 table "ok" 的前 10 个元素，然后从这 10 个元素中获取 class "red" 的所有元素在这种情况下，我只会得到 6 个元素。

我只走了这么远

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

Answer 1

$(".red").slice(0,10);

了解一下 here http://api.jquery.com/slice/

Answer 2

您可以使用一个选择器来实现，使用 jQuery 的 :lt extension 和一个后代选择器：

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

也就是说："Within the element with the id ok, select the rows with zero-based indexes less than 10 (so, 0-9) and select the descendants of those rows with the class .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 的直接子项无效。

Answer 3

您的方法中缺少的是 find()

var red = total.slice(0, 10).find('.red');

对行进行切片，然后找到那些行中的红色class

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

Get first specific elements from a defined total of elements

javascript

jquery

children

elements

slice