選擇相對於'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中的所有鏈接。