.next().next() vs .nextAll(':eq(1)') vs nextAll().eq(1) (v5)

Revision 5 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="container">
<div id="selected_node">0</div>
<div id="sibling_1">1</div>
<div id="sibling_2">2</div>
<div id="sibling_3">3</div>
<div id="sibling_4">4</div>
<div id="sibling_5">5</div>
<div id="sibling_6">6</div>
<div id="sibling_7">7</div>
<div id="sibling_8">8</div>
<div id="sibling_9">9</div>
<div id="sibling_10">10</div>
<div id="sibling_11">11</div>
<div id="sibling_12">12</div>
<div id="sibling_13">13</div>
<div id="sibling_14">14</div>
<div id="sibling_15">15</div>
<div id="sibling_16">16</div>
<div id="sibling_17">17</div>
<div id="sibling_18">18</div>
<div id="sibling_19">19</div>
<div id="sibling_20">10</div>
<div id="sibling_21">21</div>
<div id="sibling_22">22</div>
<div id="sibling_23">23</div>
<div id="sibling_24">24</div>
<div id="sibling_25">25</div>
</div>

Setup

var selected = $('#selected_node');
  var second_sibling;

Test runner

Ready to run.

Testing in
TestOps/sec
.next() x10
second_sibling = selected.next().next().next().css("background-color","orange");
ready
.nextAll(':eq(10)')
second_sibling = selected.nextAll(':eq(2)').css("background-color","red");
ready
.nextAll().eq(10)
second_sibling = selected.nextAll().eq(2).css("background-color","blue");
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.