jQuery selector test with val extraction

Benchmark created by Anurag on March 21, 2011

Description

Preparation HTML

<style>
.h {
    display: none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="formEdit">
  <div>
    <input class="t" type="text" value="first" />
    <input style="display:none;" class="t h" type="text" value="second" />
    <input style="display:none;" class="t h" type="text" value="third" />
  </div>
</div>
<script>
  // Cross-browser getElementsByClassName
  // taken from http://ejohn.org/blog/getelementsbyclassname-speed-comparison
  
  
  function getElementsByClassName(oElm, strTagName, strClassName) {
   var arrElements = (strTagName == "*" && oElm.all) ? oElm.all : oElm.getElementsByTagName(strTagName);
   var arrReturnElements = new Array();
   strClassName = strClassName.replace(/\-/g, "\\-");
   var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
   var oElement;
   for (var i = 0; i < arrElements.length; i++) {
    oElement = arrElements[i];
    if (oRegExp.test(oElement.className)) {
     arrReturnElements.push(oElement);
    }
   }
   return (arrReturnElements)
  }
</script>

Test runner

$('#formEdit div input.t:visible').val();

$(".t:visible").val();

$("#formEdit .t:visible").val();

var form = document.getElementById('formEdit');
$('.t:visible', form).val();

var form = document.getElementById('formEdit');
var ts = form.getElementsByClassName('t');
var value;
for (var i = 0; i < ts.length; i++) {
 if (ts[i].style.display != 'none') {
  value = ts[i].value;
  break;
 }
}

var form = document.getElementById('formEdit');
var ts = form.getElementsByClassName('t');
var value;
for (var i = 0; i < ts.length; i++) {
 if (ts[i].classList.contains('h')) {
  value = ts[i].value;
  break;
 }
}

var form = document.getElementById('formEdit');
var divs = form.getElementsByTagName('div');
var value;
for (var i = 0; i < divs.length; i++) {
 var inputs = divs[i].getElementsByTagName('input');
 for (var j = 0; j < inputs.length; j++) {
  if (inputs[j].style.display != 'none') {
   value = inputs[j].value;
   break;
  }
 }
}

var form = document.getElementById('formEdit');
var ts = getElementsByClassName(form, 'input', 't');
var value;
for (var i = 0; i < ts.length; i++) {
 if (ts[i].style.display != 'none') {
  value = ts[i].value;
  break;
 }
}

Revisions

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

• Revision 1: published by Anurag on March 21, 2011