Info

Which way is faster for accessing to particular html elements. Using jQuery and only few html elements.

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="id_a" class="c_a">
  <div id="id_ab" class="c_ab">
    <div id="id_abc" class="c_abc">
    </div>
    <div id="id_abc2" class="c_abc">
      <span class="c_sp sp1">
        X
      </span>
    </div>
  </div>
  <div id="id_ab2" class="c_ab">
    <span class="c_sp sp2">
      Y
    </span>
  </div>
</div>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

var elm = $(".sp1");

var elm = $("span.sp1");

var elm = $("#id_abc2 .sp1");

var elm = $("#id_abc2 span.sp1");

var elm = $(".sp1:first");

var elm = $(".sp1")[0];

var elm = $("#id_a .sp1");

var elm = $(".c_sp");

var elm = $(".c_sp.sp1");

var elm = $("#id_abc2").find(".sp1");

var elm = $("#id_abc").find(".c_abc");

var elm = $(".c_abc");

var elm = $("#id_abc .c_abc");

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

Compare results of other browsers

0 comments