JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="list1">
<li>
<span class="label">List 1 Item 1</span>
<ul id="list2">
<li>
<span class="label">List 2 Item 1</span>
</li>
<li>
<span class="label">List 2 Item 2</span>
</li>
</ul>
</li>
<li>
<span class="label">List 1 Item 2</span>
</li>
</ul>
<div>Output:</div>
<div id="output"></div>
JavaScript
(function( $ ) {
$.fn.closestDown = function(selector) {
var selection = [];
var query = function () {
this.children().each(function() {
if ($(this).is(selector)) {
selection.push(this);
}
else {
query.call(this);
}
});
};
query.call(this);
return this.pushStack(selection, "closestDown", selector);
};
})(jQuery);
$(function () {
var selection = $("#list1").closestDown("li");
selection.each(function() {
$("#output").append($(".label", this).html() + "<br />");
});
});