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

Question

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

$("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

$("ul.myul li:nth-child(2) div").on("mouseover",function(){ 
 
    $link = $(this).parent().prev('li').find('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> 
 
    </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>

1. 使用.pareent（）来获得李
2. 使用.prev（）来获得锚的李
3. 使用find获得锚

Answer 2

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