Find not direct element - html

Question

Edit: Please take note that the number of parent divs may vary. It may be one or more.
I am trying everything to get the parent <div> of a <div> with class rat that contains a label. So in this case, the outermost <div> must be returned.
<div> --> Should be returned
<div>
<div class="item box1" id="box1">1</div>
<div class="item" id="box2">2</div>
<div class="item" id="box3">3</div>
<div class="item rat" id="box4">4</div>
</div>
<label>Im the original parent</label>
</div>
It can easily be done when I add class attributes for each div and use closest() but for this case there's no unique selector that I can use.
Or we can take it this way: find the closest label of the <div> with class rat using the above example:
$('.rat') -> selector

Answer 1

A recursive approach is the most suitable for your required behavior:
function getParentWithLabel(className) {
function climbRecusively(node) {
const parent = node.parent();
return (parent.find('> label').length ? parent : climbRecusively(parent));
}
return climbRecusively($(`.${className}`));
}
$(function() {
getParentWithLabel('rat').css('background-color', 'grey');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div>
<div class="item box1" id="box1">1</div>
<div class="item" id="box2">2</div>
<div class="item" id="box3">3</div>
<div class="item rat" id="box4">4</div>
</div>
<label>Im the original parent</label>
</div>
I hope this helps.

Answer 2

Maybe it would be easier if you apply your style in your global jQuery, like this :
$('.rat').parent().next();

Answer 3

Try this too
var parentEls = $( ".rat" ).parents();
parentEls.each(function (i, obj) {
if($(obj).find( "> label" ).length){
console.log($(obj).attr('class'));
}
});
Full example : http://jsfiddle.net/harshakj89/ey00czfn/1/