Следующий элемент, когда два уровня выше в jQuery

Question

Я пытаюсь создать функциональность вкладки в jQuery.

Мой HTML-код выглядит так:

    <div class="feature__content">
            <h3 class="feature__content__toptitle"><?php the_sub_field('feature_top_title'); ?></h3>
            <h2 class="feature__content__title"><?php the_sub_field('feature_title'); ?></h2>


            <div class="feature__content__tabs">
                <span class="feature__content__tabs__selector" data-selector="overview">Overview</span>
                <span class="feature__content__tabs__selector" data-selector="features">Features</span>
            </div>

            <div class="feature__content__target" data-target="overview">
                <?php the_sub_field('feature_overview'); ?>
            </div>
            <div class="feature__content__target" data-target="features">
                features slider here
            </div>
    </div>

Когда я нажимаю на диапазон с data-selector="overview", должен отображаться div с data-target="overview". И когда я нажимаю на функции, цель функции должна быть показана.

Честно говоря, я не знаю, как подняться на несколько уровней вверх, а затем выбрать конкретное с помощью атрибута данных.

Мой код jQuery уже выглядит так:

jQuery('.feature__content__target:last-child()').hide();

jQuery('.feature__content__tabs__selector').on('click', function(e) {
    var selector = jQuery(this).data('selector');
    var targets = jQuery('feature__content__target');
    var container = jQuery(this).closest('.feature__content');
    var target = container.find('div[data-target="' + selector + '"]');

    console.log(selector);

    targets.removeClass('show');
    target.addClass('show');    
});

Answer 1

Вы можете использовать .closest()

Для каждого элемента в наборе получите первый элемент, который соответствует селектору, проверив сам элемент и пройдя через его предков в дереве DOM.

и find()

Получить потомков каждого элемента в текущем наборе соответствующих элементов, отфильтрованных селектором, объектом jQuery или элементом.

jQuery('.feature__content__tabs__selector').on('click', function(e){
  e.preventDefault();

  var selector = jQuery(this).data('selector');

  jQuery(this).closest('.feature__content').find('div[data-target="'+ selector +'"]').toggle();
});

[data-selector="overview"]{
  color: green;
}
[data-selector="features"]{
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feature__content">
  <h3 class="feature__content__toptitle"><?php the_sub_field('feature_top_title'); ?></h3>
  <h2 class="feature__content__title"><?php the_sub_field('feature_title'); ?></h2>


  <div class="feature__content__tabs">
      <span class="feature__content__tabs__selector" data-selector="overview">Overview</span>
      <span class="feature__content__tabs__selector" data-selector="features">Features</span>
  </div>

  <div class="feature__content__overview" data-target="overview">
      overview here
  </div>
  <div class="feature__content__features" data-target="features">
      features slider here
  </div>
</div>

Answer 2

Используйте .closest, чтобы перейти к ближайшему предку цели, который имеет класс .feature__content, и с этого момента .find элемент с соответствующим data-target:

jQuery('.feature__content__tabs__selector').on('click', function(e) {
  var selector = jQuery(this).data('selector');
  var container = $(this).closest('.feature__content');
  var target = container.find('div[data-target="' + selector + '"]')
  target.toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feature__content">
  <h3 class="feature__content__toptitle">
    <?php the_sub_field('feature_top_title'); ?>
  </h3>
  <h2 class="feature__content__title">
    <?php the_sub_field('feature_title'); ?>
  </h2>


  <div class="feature__content__tabs">
    <span class="feature__content__tabs__selector" data-selector="overview">Overview</span>
    <span class="feature__content__tabs__selector" data-selector="features">Features</span>
  </div>

  <div class="feature__content__overview" data-target="overview">
    feature overview
  </div>
  <div class="feature__content__features" data-target="features">
    features slider here
  </div>
</div>

Или, конечно, вы можете дважды позвонить .parent() вместо использования closest:

jQuery('.feature__content__tabs__selector').on('click', function(e) {
  var selector = jQuery(this).data('selector');
  var container = $(this).parent().parent();
  var target = container.find('div[data-target="' + selector + '"]')
  target.toggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feature__content">
  <h3 class="feature__content__toptitle">
    <?php the_sub_field('feature_top_title'); ?>
  </h3>
  <h2 class="feature__content__title">
    <?php the_sub_field('feature_title'); ?>
  </h2>


  <div class="feature__content__tabs">
    <span class="feature__content__tabs__selector" data-selector="overview">Overview</span>
    <span class="feature__content__tabs__selector" data-selector="features">Features</span>
  </div>

  <div class="feature__content__overview" data-target="overview">
    feature overview
  </div>
  <div class="feature__content__features" data-target="features">
    features slider here
  </div>
</div>

Или, с вашим новым HTML, если вы хотите вместо этого переключаться с классами, просто используйте эти классы, а не .show() / .hide() (элемент, переключаемый этими методами, не будет затронут классами, которые делают элемент виден или нет).

Обратите внимание, что вам нужно использовать . перед классом, чтобы указать, что вы хотите найти элемент с этим классом. (Ваш var targets = jQuery('feature__content__target'); будет искать элементы с именем тега из feature__content__target)

jQuery('.feature__content__tabs__selector').on('click', function(e) {
  var selector = jQuery(this).data('selector');
  var targets = jQuery('.feature__content__target');
  var container = jQuery(this).closest('.feature__content');
  var target = container.find('div[data-target="' + selector + '"]');

  console.log(selector);

  targets.removeClass('show');
  target.addClass('show');
});

.feature__content__target {
  display: none;
}

.show {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feature__content">
  <h3 class="feature__content__toptitle">
    <?php the_sub_field('feature_top_title'); ?>
  </h3>
  <h2 class="feature__content__title">
    <?php the_sub_field('feature_title'); ?>
  </h2>


  <div class="feature__content__tabs">
    <span class="feature__content__tabs__selector" data-selector="overview">Overview</span>
    <span class="feature__content__tabs__selector" data-selector="features">Features</span>
  </div>

  <div class="feature__content__target" data-target="overview">
    feature overview here
  </div>
  <div class="feature__content__target" data-target="features">
    features slider here
  </div>
</div>