jquery obj loops

Benchmark created by Kevin on

Preparation HTML

<div class="mzr-slider loader loader-layer-over">


        <ul class="slides current-1 count-4 init-animation">

                <li>
                        <div class="slide-image-wrapper">
                                <div class="slide-image" data-sliderbgsmall="http://lorempixel.com/770/300/?nonce=1" data-sliderbglarge="http://lorempixel.com/1280/500/?nonce=1" style="background:url(http://lorempixel.com/1280/500/?nonce=1)"></div>
                        </div>
                        <div class="slide-content-wrapper">
                                <div class="slide-content">
                                        content goes here
                                </div>
                        </div>

                </li>
                <li>
                        <div class="slide-image-wrapper">
                                <div class="slide-image" data-sliderbgsmall="http://lorempixel.com/770/300/?nonce=2" data-sliderbglarge="http://lorempixel.com/1280/500/?nonce=2" style="background:url(http://lorempixel.com/1280/500/?nonce=2)"></div>
                        </div>
                        <div class="slide-content-wrapper">
                                <div class="slide-content">
                                        content goes here
                                </div>
                        </div>

                </li>
                <li>
                        <div class="slide-image-wrapper">
                                <div class="slide-image" data-sliderbgsmall="http://lorempixel.com/770/300/?nonce=3" data-sliderbglarge="http://lorempixel.com/1280/500/?nonce=3" style="background:url(http://lorempixel.com/1280/500/?nonce=3)"></div>
                        </div>
                        <div class="slide-content-wrapper">
                                <div class="slide-content">
                                        content goes here
                                </div>
                        </div>

                </li>
                <li>
                        <div class="slide-image-wrapper">
                                <div class="slide-image" data-sliderbgsmall="http://lorempixel.com/770/300/?nonce=4" data-sliderbglarge="http://lorempixel.com/1280/500/?nonce=4" style="background:url(http://lorempixel.com/1280/500/?nonce=4)"></div>
                        </div>
                        <div class="slide-content-wrapper">
                                <div class="slide-content">
                                        content goes here
                                </div>
                        </div>

                </li>
<li>
                        <div class="slide-image-wrapper">
                                <div class="slide-image" data-sliderbgsmall="http://lorempixel.com/770/300/?nonce=1" data-sliderbglarge="http://lorempixel.com/1280/500/?nonce=1" style="background:url(http://lorempixel.com/1280/500/?nonce=1)"></div>
                        </div>
                        <div class="slide-content-wrapper">
                                <div class="slide-content">
                                        content goes here
                                </div>
                        </div>

                </li>
                <li>
                        <div class="slide-image-wrapper">
                                <div class="slide-image" data-sliderbgsmall="http://lorempixel.com/770/300/?nonce=2" data-sliderbglarge="http://lorempixel.com/1280/500/?nonce=2" style="background:url(http://lorempixel.com/1280/500/?nonce=2)"></div>
                        </div>
                        <div class="slide-content-wrapper">
                                <div class="slide-content">
                                        content goes here
                                </div>
                        </div>

                </li>
                <li>
                        <div class="slide-image-wrapper">
                                <div class="slide-image" data-sliderbgsmall="http://lorempixel.com/770/300/?nonce=3" data-sliderbglarge="http://lorempixel.com/1280/500/?nonce=3" style="background:url(http://lorempixel.com/1280/500/?nonce=3)"></div>
                        </div>
                        <div class="slide-content-wrapper">
                                <div class="slide-content">
                                        content goes here
                                </div>
                        </div>

                </li>
                <li>
                        <div class="slide-image-wrapper">
                                <div class="slide-image" data-sliderbgsmall="http://lorempixel.com/770/300/?nonce=4" data-sliderbglarge="http://lorempixel.com/1280/500/?nonce=4" style="background:url(http://lorempixel.com/1280/500/?nonce=4)"></div>
                        </div>
                        <div class="slide-content-wrapper">
                                <div class="slide-content">
                                        content goes here
                                </div>
                        </div>

                </li>
        </ul>
        <div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Setup

var slides = $('.slides li');

Test runner

Ready to run.

Testing in
TestOps/sec
each
slides.each(function(index){

console.log($(this));

});
ready
for loop
slides.map(function(index){

console.log($(this));

});
ready

Revisions

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