Preparation Code Preparation HTML (this will be inserted in the <body> of a valid HTML5 document in standards mode) <script src ="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" > </script >
<ul class ='first' >
<li class ='foo' >
</li >
<li class ='bar' >
</li >
</ul >
Setup JS function hasClass (el, className ){
if (el.classList )
el.classList .contains (className)
else
new RegExp ('(^| )' + className + '( |$)' , 'gi' ).test (el.className )
}
function selector (selector, callback ){
var els = document .querySelector (selector);
for (var i = 0 ; i < els.length ; ++i) {
callback (els[i]);
}
}
Teardown JS
$('.foo' ).css ('background-color' , 'transparent' );
$('.bar' ).css ('background-color' , 'transparent' );
Test cases
Test #1 Title *
Async
Code * $('ul.first' )
.find ('.foo' )
.css ('background-color' , 'red' )
.end ()
.find ('.bar' )
.css ('background-color' , 'green' )
.end ();
Test #2 Title *
Async
Code * var e = document .querySelector ("ul.first" );
for (var i = 0 ; i < e.length ; ++i) {
if (hasClass (e[i], 'foo' ))
e[i].style .backgroundColor = 'red' ;
if (hasClass (e[i], 'bar' ))
e[i].style .backgroundColor = 'green' ;
}
Title *
Async
Code * var elfoo = document .querySelector ("ul.first .foo" );
var elbar = document .querySelector ("ul.first .bar" );
for (var i = 0 ; i < elfoo.length ; ++i) {
elfoo[i].style .backgroundColor = 'red' ;
}
for (var i = 0 ; i < elbar.length ; ++i) {
elbar[i].style .backgroundColor = 'green' ;
}
Title *
Async
Code * selector ("ul.first .foo" , function (element ){
element.style .backgroundColor = 'red' ;
});
selector ("ul.first .bar" , function (element ){
element.style .backgroundColor = 'green' ;
});