JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title>jQuery .closure() test case</title>
    </head>
    <body>
        <ul id="l1">
            <li class="cl1">l1.1</li>
            <li class="cl2">l1.2<ul id="l2">
                <li class="cl3">l2.1</li>
                </ul></li>
        </ul>
        <div id="spew"></div>
    </body>
</html>

JavaScript

var t0 = $('li.cl3'); // t0.length = 1
var t1 = $(t0).closest('ul'); // t1.length = 1
var t2 = $(t0).closest('ul li.cl1'); // t2.length = 0 ... why?
var t3 = $(t0).closest('ul li.cl2'); // t3.length = 1
var t4 = $(t0).closest('ul li.cl3'); // t4.length = 1
$('#spew').append('<br>t0 = ' + t0.length);
$('#spew').append('<br>t1 = ' + t1.length);
$('#spew').append('<br>t2 = ' + t2.length);
$('#spew').append('<br>t3 = ' + t3.length);
$('#spew').append('<br>t4 = ' + t4.length);