JSFiddle - React, Tailwind, and code Playground
HTML
<div id="box0" class="mybox">
<span class="label">box</span>
<div class="content">
<div id="box1" class="mybox">
<span class="label">innerbox</span>
<div id="box2" class="mybox">
<span class="label">innerinnerbox</span>
</div>
</div>
</div>
</div>
<div>Output:</div>
<div id="output"></div>
JavaScript
(function( $ ) {
$.fn.closestDown = function(selector) {
var selection = [];
var query = function () {
this.children().each(function() {
var $this = $(this);
if ($this.is(selector)) {
selection.push(this);
}
else {
query.call($this);
}
});
};
query.call(this);
return this.pushStack(selection, "closestDown", selector);
};
})(jQuery);
$(function () {
var selection = $("#box0").closestDown(".mybox");
selection.each(function() {
$("#output").append($(".label", this).html() + "<br />");
});
});