JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<div id='first'>some text</div>
<input type='text' name='input' id='input' tabindex="0" />
<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"]'
];

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);