选择相对于'this'的父元素的兄弟，然后选择子元素

Question

如果用户将鼠标悬停在Test上，那么'''列表中链接的href属性，例如应该输出谷歌的链接。但我不知道如何从a访问this标记。

$("ul.myul li:nth-child(2) div:nth-child(1)").on
(
  "mouseover",
  function()
  {
    $link = $(this).closest('a').attr("href");
    $("#output").html($link);
  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myul">
  <li>
    <div>
      <a href="www.yahoo.de">yahoo</a>
    </div>
  </li>
  <li>
    <div>Test</div>
    <div>Foo</div>
  </li>
</ul>
<ul class="myul">
  <li>
    <div>
      <a href="www.google.de">google</a>
    </div>
  </li>
  <li>
    <div>Test</div>
  </li>
</ul>
<ul class="myul">
  <li>
    <div>
      <a href="www.bing.de">bing</a>
    </div>
  </li>
  <li>
    <div>Test</div>
  </li>
</ul>

<p id="output"></p>

我已经尝试find和closest，但没有任何帮助。

Answer 1

＆＃13;

＆＃13;

$("ul.myul li:nth-child(2) div").on("mouseover",function(){
    $link = $(this).parent().prev('li').find('a').attr("href");
    $("#output").html($link);
  }
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myul">
  <li>
    <div>
      <a href="www.yahoo.de">yahoo</a>
    </div>
  </li>
  <li>
    <div>Test</div>
  </li>
</ul>
<ul class="myul">
  <li>
    <div>
      <a href="www.google.de">google</a>
    </div>
  </li>
  <li>
    <div>Test</div>
  </li>
</ul>
<ul class="myul">
  <li>
    <div>
      <a href="www.bing.de">bing</a>
    </div>
  </li>
  <li>
    <div>Test</div>
  </li>
</ul>

<p id="output"></p>

＆＃13;

＆＃13;

＆＃13;

1. 使用.pareent（）获取li
2. 使用.prev（）获取锚点的li
3. 使用find获取锚点

Answer 2

$(this).parents('ul').find('a')为您提供相同UL中的所有链接。