Access to the furthest parent

Question

I wondering how can I addClass to the furthest parent from li, I tried this and it working fine but I'm feel it's a bad logic, isn't it?

$('li').each(function() {
  $(this).click(function() {
    $(this).parent().parent().parent().parent().parent().parent().addClass('myClass');
  });
});

.myClass {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div> <!-- I want to add class to this parent -->
  <div>
    <div>
      <div>
        <div>
          <ul>
            <li><a>Click</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

I want to something like closest() that work for children, is there a way to access grand parent? in this example I forced to write parent() six times!

How are you identifying the "furthest" parent? The one just below `body`? — T.J. Crowder, Mar 04 '18 at 18:11
I saw the comment; it wasn't clear. Yes, it's just under `body` **in the example**, but that doesn't mean that's your real use case. — T.J. Crowder, Mar 04 '18 at 18:14
`.parents(":not(body)").last()`, see the linked question's answers for details. — T.J. Crowder, Mar 04 '18 at 18:15
@T.J.Crowder No, in my project it's not under `body`, I think I found the solution with that topic @maiorano84 — Jack The Baker, Mar 04 '18 at 18:16
Normally you mark the parent with say another class, or some sort of attribute you can find on, and then just use closest on this. — Keith, Mar 04 '18 at 18:20
@tourtravel: Well, which is it? It's either the one just under body (the question you answered "yes" to) or not (your most recent comment). — T.J. Crowder, Mar 04 '18 at 18:23

score 1 · Answer 1 · answered Mar 04 '18 at 18:15

Fetch the .last() among all of the .parents() of the element.

$('li').each(function() {
  $(this).click(function() {
    $(this).parents('div').last().addClass('myClass');
  });
});

.myClass {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div> <!-- I want to add class to this parent -->
  <div>
    <div>
      <div>
        <div>
          <ul>
            <li><a>Click</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Carr · Accepted Answer · 2018-03-05T07:40:38.817

Use $(this).parents([optional]).eq(n)

Update :

Here are some properties if we console.log($(this).parents()) and console.log($(this).parents('div')), the flexibility of .eq(n) is maybe not every time we want the outermost one:

$(this).parents()

{
  "0": <ul>…</ul>,
  "1": <div>…</div>,
  "2": <div>…</div>,
  "3": <div>…</div>,
  "4": <div>…</div>,
  "5": <div class="myClass">…</div>,
  "6": <body>…</body>,
  "7": <html>…</html>,
  "length": 8,
  ...

$(this).parents('div')

{
  "0": <div>…</div>,
  "1": <div>…</div>,
  "2": <div>…</div>,
  "3": <div>…</div>,
  "4": <div class="myClass">…</div>,
  "length": 5,
 ...

$('li').each(function() {
  $(this).click(function() {
     $(this).parents().eq(5).addClass('myClass');
     // Or 
     // $(this).parents('div').eq(4).addClass('myClass');
     console.log($(this).parents('div'));
  });
});

.myClass {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div> <!-- I want to add class to this parent -->
  <div>
    <div>
      <div>
        <div>
          <ul>
            <li><a>Click</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

Access to the furthest parent

2 Answers2