應用選擇器之後應用選擇器

Question

我在頁面上有多個具有.product1的項目。當用戶將鼠標懸停在縮放按鈕上時，我想要獲得類image的HTML。 我試過：

$(this).closest(".product1")(".image").html() 

但是，這不會返回任何內容。

這裏是我的代碼：

$(document).ready(function() { 
    $(".productzoom").hover(function() {//also add this function to click 
     console.log($(this).closest(".product1")(".image").html());   
    }); 
}); 


<div class="product1"> 
    <div class="prodtitle"> 
     <span itemprop="name"><asp:Literal ID="Literal11" runat="server" /></span> 
    </div> 
    <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> 
     <div class="price"> 
      <span itemprop="price"><asp:Literal ID="Literal12" runat="server" /> <asp:Literal ID="Literal13" runat="server" /> <asp:Literal ID="Literal14" runat="server" /></span> 
     </div> 
    </div> 
    <div class="description"> 
     <div class="image"> 
      <a href="http://www.bing.com?id=1"><img src="/images/logo_nl.png" style="max-width:100px" alt="Deckchairs" /> <!--thumbnail image-->     
       <span> <!--span contains the popup image--> 
       <img style="max-width:400px" src="/images/logo_nl.png" alt="Deckchairs" /> <!--popup image--> 
       <br />Deckchairs on Blackpool beach <!--caption appears under the popup image--> 
       </span> 
      </a> 
     </div> 


     <span itemprop="description"><asp:Literal ID="Literal15" runat="server" /></span> 
    </div> 

    <div class="stock"><asp:Literal ID="ltStockStatus" runat="server" /></div> 
    <div class="actionmenu">   
     <img src="/images/zoom.png" class="productzoom pointer" /> 
     <a class="link viewproduct" href="#" title="">view</a> 
     <a class="link orderproduct" rel="nofollow" href="#" target="_blank" title="">order</a> 
    </div> 
</div> 

Answer 1

你剛剛離開了.find()。

用途：

$(document).ready(function() { 
    $(".productzoom").hover(function() {//also add this function to click 
     console.log($(this).closest(".product1").find(".image").html());   
    }); 
}); 

jsFiddle example