Search code examples
javascriptjquerysliceelementchildren

Get first specific elements from a defined total of elements

I have 

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

I want to get first 10 elements of table "ok" and from those 10, i want to get all elements with class "red" In this case, I would get only 6 elements.

I have went only this far

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

  • You can do it with one selector, using jQuery's :lt extension and a descendant selector:

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

    That says: "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." (Yes, jQuery extension selectors use 0-based indexes rather than the usual 1-based ones in CSS.)

    Live Example:

    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>

    Note that you have to fix your markup, div isn't valid as a direct child of tr.