Как получить значение идентификатора родительского элемента по классу, который не является немедленным? jQuery

Question

Я знаю, как получить значение класса ближайших родителей, id..et c .. Но как вы можете получить значение идентификатора родителя, который не является непосредственным и не самым старшим родителем, но известное имя класса? Я знаю, что вы думаете, просто чтобы получить значение идентификатора на основе имени класса. Но у меня много динамически загружаемого контента с теми же классами. Поэтому я должен иметь класс, который является родителем ЭТОГО элемента. Спасибо!

<div class="A">
    <div class="B" id="1">
        <div class="C">
            <div class="D">
                <input class="need-ID-of-class-B" value="">
            </div>
        </div>
    </div>
</div>

Answer 1

Вы можете попробовать с .parents() ИЛИ .closest():

console.log($('.need-ID-of-class-2').closest('.2').attr('id'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="1">
  <div class="2" id="1">
    <div class="3">
      <div class="4">
        <input class="need-ID-of-class-2" value="">
      </div>
    </div>
  </div>
</div>

Answer 2

Различные способы доступа к элементам ближайших предков: closest () , parent () , querySelector with closest () .

$('.need-ID-of-class-B').closest('.B').attr('id');

$('.need-ID-of-class-B').parents('.B').attr('id');

document.querySelector('.need-ID-of-class-B').closest("div .B").getAttribute('id');

Answer 3

С помощью .closest([class="2"]) вы можете получить предка, совпадающего с .2, и получить его идентификатор:

const input = document.querySelector('input');
console.log(input.closest('[class="2"]').id);

<div class="1">
    <div class="2" id="1">
        <div class="3">
            <div class="4">
                <input class="need-ID-of-class-2" value="">
            </div>
        </div>
    </div>
</div>

Если возможно, исправьте HTML, чтобы его классы были действительными - имена классов не должны начинаться с цифры. Тогда вы можете использовать . вместо [class]:

const input = document.querySelector('input');
console.log(input.closest('.two').id);

<div class="1">
    <div class="two" id="1">
        <div class="3">
            <div class="4">
                <input class="need-ID-of-class-2" value="">
            </div>
        </div>
    </div>
</div>