JSFiddle - React, Tailwind, and code Playground

HTML

<div id="1" class="elem1"></div>
<div id="2" class="elem1"></div>
<div id="3" class="elem1"></div>
<div id="4" class="elem2"></div>
<div id="5" class="elem2"></div>
<div id="6" class="elem2"></div>
<div id="7" class="elem3"></div>
<div id="8" class="elem3"></div>
<div id="9" class="elem3"></div>
<div id="10" class="elem3"></div>
<div id="11" class="elem3"></div>
<div id="12" class="elem3"></div>


<input type="button" id="getSelectorInfo" value="Test" />
<!-- comment -->

JavaScript

var counterElemTested=0;
$.extend($.expr[':'],{
    mySelector:function(el){
        ++counterElemTested;
        console.log(el);
    }
});

$('#getSelectorInfo').click(function(){
    $('.elem1:mySelector(true)');
    console.log('counterElemTested:'+counterElemTested);
    counterElemTested=0;
});

//Chrome -> counterElemTested=3
//Ie7,8 (didn't check Ie6,9) -> counterElemTested=24 !

console.log( 'total elems without comments nodes(21): ', $('*').length );