JSFiddle - React, Tailwind, and code Playground
HTML
<div id='first'>some text</div>
<input type='text' name='input' id='input' />
<button id='count-button'>count tabindexed input</button>
<div id='log'></div>
JavaScript
var selectors = [
"*",
"[tabIndex]",
"[tabindex]",
"[tabIndex=0]",
"[tabIndex='0']",
'[tabIndex="0"]',
"[tabindex=0]",
"[tabindex='0']",
'[tabindex="0"]'
];
var $log = $("#log");
function countTabIndex() {
for (var i = 0, l = selectors.length; i < l; i++) {
countAndLog(selectors[i]);
}
}
function countAndLog(selector) {
var count = $(selector).length;
$log.append("selector " + selector + " with jQuery: " + count + "<br>");
if (document.querySelectorAll) {
try {
count = document.querySelectorAll(selector).length;
} catch (e) {
count = "invalid";
}
$log.append("selector " + selector + " with QSA: " + count + "<br>");
}
}
$("#count-button").click(countTabIndex);