Question

我需要找到最接近点击的h2值。但是，h2位于父div的兄弟姐妹中。有多个div具有各种h2值。如果点击了链接，我需要最接近的h2值。

<div class="daddy">
    <div class="sibling-1">
        <h2>Sibling 1</h2>
    </div>
    <div class="sibling-2">
        <a href="/1">link 1</a>
        <a href="/2">link 2</a>
    </div>
    <div class="sibling-3">
        <h2>Sibling 3</h2>
    </div>
    <div class="sibling-4">
        <a href="/3">link 3</a>
        <a href="/4">link 4</a>
    </div>
</div>

所以我需要它，如果点击link 1，则返回Sibling 1。如果点击link 4，则会返回Sibling 3。

我无法访问客户端代码，因为这是针对GTM实现的。

我已尝试jQuery({{Click Element}}).closest('.daddy').find('h2').text();，但此回复Sibling 1 Sibling 3。

修改

忘记包括在某些情况下h2和/或链接位于多个更深的div中，例如

<div class="daddy">
    <div class="sibling-1">
        <div class="deep-1">
            <h2>Sibling 1</h2>
        </div>
    </div>
    <div class="sibling-2">
        <div class="deep-1">
            <div class="deep-2">
                <a href="/1">link 1</a>
            </div>
        </div>
        <a href="/2">link 2</a>
    </div>
    <div class="sibling-3">
        <h2>Sibling 3</h2>
    </div>
    <div class="sibling-4">
        <a href="/3">link 3</a>
        <a href="/4">link 4</a>
    </div>
</div>

Answer 1

此代码应该有效。

首先，它使用parentsUntil查找所有封闭的DIV，直到.daddy，并获取最后一个以找到要搜索其兄弟的DIV。为了使事情更清楚，我建议你给所有那些DIV一个普通的类，所以你可以使用.closest（“。classname”）`找到那个DIV。

从那里，prevAll找到它前面包含h2元素的所有DIV，取第一个（因为它们以距离的顺序返回，它们将是最接近的），并且然后在其中找到h2元素。

$("a").click(function() {
  var containingDiv = jQuery(this).parentsUntil(".daddy").last();
  var prevDivs = containingDiv.prevAll("div:has(h2)");
  var h2 = prevDivs.first().find("h2");
  alert(h2.text());

  return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="daddy">
  <div class="sibling-1">
    <div class="deep-1">
      <h2>Sibling 1</h2>
    </div>
  </div>
  <div class="sibling-2">
    <div class="deep-1">
      <div class="deep-2">
        <a href="/1">link 1</a>
      </div>
    </div>
    <a href="/2">link 2</a>
  </div>
  <div class="sibling-3">
    <h2>Sibling 3</h2>
  </div>
  <div class="sibling-4">
    <a href="/3">link 3</a>
    <a href="/4">link 4</a>
  </div>
</div>

Answer 2

    jQuery(document).ready(function($){
       $('a').on('click',function(event){
         event.preventDefault();
        alert($(this).parent().prev().find('h2').text());
        return false;
});

});

jQuery最近的H2值是非父/子

2 个答案: