JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    These tests illustrate a bug in jQuery: the selector <code>[href]</code> fails to match hyperlinks with empty <code>href</code> attributes in some cases.
</p>
<h1>Test 1</h1>
<div id="test1">
    Two child elements: <b>some text</b>, and <a href="">a link with an empty <code>href</code> attribute</a>
</div>
<pre id="out1">
    (results from test 1)
</pre>
<h1>Test 2</h1>
<div id="test2">
    Two child links: <a href="">one with an empty <code>href</code> attribute</a>, and <a href="#">one with a non-empty <code>href</code> attribute</a>
</div>
<pre id="out2">
    (results from test 2)
</pre>

CSS

h1 {
    font-weight: bold;
}

h1, p, #out1, #out2 {
    margin: 1em 0;
}

.FAILED {
    color: red;
}

JavaScript

function result( description, actual, expected ) {
    var ok = (actual === expected);

    return '<span class="' + ( ok ? 'OK' : 'FAILED' ) + '">' + description + ' => ' + actual + ( ok ? '' : ( ' (expected: ' + expected + ')' ) ) + '</span>';
}

// Test 1

jQuery('#out1').html([
    result( '$(\'#test1 > *\').length', $('#test1 > *').length, 2 ),
    result( '$(\'#test1 > *\').filter(\'a\').filter(\'[href]\').length', $('#test1 > *').filter('a').filter('[href]').length, 1 ),
    result( '$(\'#test1 > a\').filter(\'[href]\').length', $('#test1 > a').filter('[href]').length, 1 ),
    result( '$(\'#test1 > *\').filter(\'a[href]\').length', $('#test1 > *').filter('a[href]').length, 1 )
].join('<br>'));

// Test 2

jQuery('#out2').html([
    result( '$(\'#test2 > a\').length', $('#test2 > a').length, 2 ),
    result( '$(\'#test2 > a[href]\').length', $('#test2 > a[href]').length, 2 ),
    result( '$(\'#test2 > a\').filter(\'[href]\').length', $('#test2 > a').filter('[href]').length, 2 )
].join('<br>'));