Find not direct element

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

Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — pwolaq, Nov 09 '17 at 14:02
I think you won't be able to do this without JS. There is no CSS selector that will do that. — sjahan, Nov 09 '17 at 14:05
Do you peviously know how deep is your `rat` element? Is it always two levels deep or it may vary? — Ghassen Louhaichi, Nov 09 '17 at 14:07
@GhassenLouhaichi i updated my question, it will vary. What I have in mind is to recursively check all parents and stop until I found a parent that contains a label tag — DarkMakukudo, Nov 09 '17 at 14:11
If the number of parent `divs` may vary, than show us another possible structure — Rusty, Nov 09 '17 at 14:15

score 1 · Accepted Answer · answered Nov 09 '17 at 14:19

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.

thanks!, the one im looking for. Ill modify on my end to satisfy my actual requirement or maybe some optimization if any — DarkMakukudo, Nov 09 '17 at 14:26

CARA · Answer 2 · 2017-11-09T14:19:55.573

0

Maybe it would be easier if you apply your style in your global jQuery, like this :

$('.rat').parent().next();

edited Nov 09 '17 at 14:19

answered Nov 09 '17 at 14:05

CARA

13
1
2

sorry i forgot to mention that the number of parent divs may vary. – DarkMakukudo Nov 09 '17 at 14:09

Harsha Jayamanna · Answer 3 · 2017-11-11T19:57:21.810

0

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/

edited Nov 11 '17 at 19:57

answered Nov 09 '17 at 14:38

Harsha Jayamanna

1,728
4
21
37

the idea is correct but it will fail once i nested my element with a lot of divs :) – DarkMakukudo Nov 09 '17 at 14:45
i've edited the answer. would you be able to check it? @Sherlock – Harsha Jayamanna Nov 11 '17 at 19:57

Find not direct element

3 Answers3