JSFiddle - React, Tailwind, and code Playground
HTML
<a id="link1" href="">a link</a><br>
<a id="link2" href="http://www.google.com">another link</a><br>
(output is in the console)
JavaScript
// In the HTML, there are two links with href attrs, #link1 and #link2. Depending on the combination of selectors and filter() calls, #link1 is sometimes lost. It looks like the link is matched correctly by filter() when it is the only element in the jQuery set, and incorrectly when there are multiple elements.
console.log("Running tests...");
// Test Case 1: Select only #link1 and filter for links with hrefs:
test('#link1');
// Test Case 2: Select #link1 and #link2 and filter for links with hrefs:
test('#link1, #link2');
/**
* Testing function: queries the selector and then filters for links with href attrs.
* Since the original set is all links with href attrs, the same set of elements should
* remain after calling filter().
*/
function test( sel ) {
var j1 = $(sel);
var j2 = j1.filter('a[href]');
console.log( "$('" + sel + "').filter('a[href]'): ", ( (j1.length === j2.length) ? "OK" : "FAILED" ), " ... found ", j2.length );
}