Using jQuery How can I find a distant parent element with few(er) parent() instances

Question

I need to add a class to an element outside the ancestry. The following method does the task, however I'd like to lessen the use of parent() instances.

The code

<h4 class="tab">Title</h4>
<div>
  <div>
    <div>
      <div>
        <ul>
          <li><p class="send">add class to h4 from here</p></li>
        </ul>
      </div>
    </div>
  </div>
</div>

<script>
jQuery(function($) {
  $(".send").parent().parent().parent().parent().parent().parent().prev().addClass("active");
});
</script>

I tried

All the following efforts fail to return the desired result.

$(".send").closest(".tab").addClass("active");

$(".send").find(".tab").addClass("active");

Update for clarity

The method is used for a slide down accordion where items are selected by the client, and each tab is highlighted if there are item(s) chosen. Also I have no control over the elements so I cannot add or remove classnames, and the structure is exactly as shown. I am just adding this method as a dynamic modification of the extension.

I assume you are trying to create some sort of edit modal where in data is grabbed dynamically from the dom, in that case my answer to a similar requirement should help, note that it is for a table but the same concepts still apply. https://stackoverflow.com/a/48863079/2757519 — Dev Man, Apr 03 '21 at 08:19
@fortunee the sending element only adds the class on a user action. I just did not include all the other coding that shows the whole process. It is quite long. Hence the reason I can't just use `$('.tab')` — Nadal, Apr 03 '21 at 09:13
@Ainz-sama it is a slide accordion or drop down, and within each container, the user initiates an action with the `.send` element and the tab should receive the class to indicate that it is active, so the user is not guessing which closed slide was used. — Nadal, Apr 03 '21 at 09:26
@Bhautik yes the HTML is repeated numerous times and only the
and inner
@mchev I don't see how a global container would resolve the case. — Nadal, Apr 03 '21 at 09:29
@Bhautik no I cannot alter the HTML, it's a third party extension and I am just adding a method to create alerts. Please see the updates in my original post for some clarity. — Nadal, Apr 03 '21 at 09:47
But you can inspect that HTML and you can see how it's rendered. — Bhautik, Apr 03 '21 at 09:58

score 1 · Accepted Answer · answered Apr 03 '21 at 08:20

Try this if you can't assign a unique class:

jQuery(function($) {
  $(".send").parents().find('.tab').addClass("active");
});

.active{
  background-color: red;
}

<body>
  <h4 class="tab">Title</h4>
  <div>
    <div>
      <div>
        <div>
          <ul>
            <li><p class="send">add class to h4 from here</p></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

This jQuery method returns all parents. Please read the docs.

This method does add the class, however it finds all elements with `h4.tab` and add, which defeats the goal. However it presents a concept to work with. — Nadal, Apr 03 '21 at 09:23

score 0 · Answer 2 · answered Apr 03 '21 at 08:16

0

Why are you making your life so hard? Just give the element you want to access a dummy class (or even ID if it’s unique) so you can easily access it with $(‚.dummyclass‘) ?

answered Apr 03 '21 at 08:16

Thallius

2,482
2
18
36

Using jQuery How can I find a distant parent element with few(er) parent() instances

Update for clarity

and inner

2 Answers2