的jQuery找到最接近元素點擊

Question

我想triggger顯示/隱藏效果時，點擊我的頁面上的鏈接，我的網頁的安裝方式是，我有以下的HTML，

<div class="results clearfix"> 
     <div class="product"> 
      <div class="media"> 

      </div> 
      <div class="information"> 
       <div class="name">A Product</div> 
       <a href="">€50</a> 
      </div> 
     </div> 
     <div class="product"> 
      <div class="media"> 

      </div> 
      <div class="information"> 
       <div class="name">A Product</div> 
       <a href="">€50</a> 
      </div> 
     </div> 
     <div class="product"> 
      <div class="media"> 

      </div> 
      <div class="information"> 
       <div class="name">A Product</div> 
       <a href="">€50</a> 
      </div> 
     </div> 
     <div class="product"> 
      <div class="media"> 

      </div> 
      <div class="information"> 
       <div class="name">A Product</div> 
       <a href="">€50</a> 
      </div> 
     </div> 
     <div class="moreWrapper"> 
      <div class="more"> 
       <div class="arrow"></div> 
       <div class="media"> 
        <img src="assets/css/img/more-image.jpg" /> 
        <a class="view" href="">View item</a> 
       </div> 
       <div class="details"> 
        <a class="cart" href="">€50</a> 
         <a class="bookmark" href=""></a> 
         <div class="clearfix"></div> 
         <div class="breakdown clearfix"> 
          <h1>ÖRSJÖ BELYSNING PJ DESK LAMP</h1> 
          <small>Item Number : UL-1027</small> 
          <dl> 
           <dt>Manufacturer</dt> 
           <dd><img src="assets/img/alessi-logo.jpg"/></dd> 
          </dl> 
          <dl> 
           <dt>Created By</dt> 
           <dd> 
            <img src="assets/img/created.jpg" alt="" /> 
            <strong>3d_alan</strong> 
            <span>on 27th Jan 2013</span> 
           </dd> 
          </dl> 
          <dl> 
           <dt>Method of creation</dt> 
           <dd> 
            <i class="creation icon-camera"></i> 
            <i class="creation icon-hands"></i> 
            <i class="creation icon-pencil"></i> 
            <i class="creation icon-fullscreen"></i> 
            <i class="creation icon-pencil"></i> 
            <i class="creation icon-photo"></i> 
           </dd> 
          </dl> 
          <dl> 
           <dt>Year of manufactuer</dt> 
           <dd>1990</dd> 
          </dl> 
         <p><em>Available Formats</em> <a href="">Require a different format?</a></p> 
         <ul class="formats"> 
          <li>3DSMax</li> 
          <li>VRay</li> 
         </ul> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="product"> 
      <div class="media"> 

      </div> 
      <div class="information"> 
       <div class="name">A Product</div> 
       <a href="">€50</a> 
      </div> 
     </div> 
     <div class="product"> 
      <div class="media"> 

      </div> 
      <div class="information"> 
       <div class="name">A Product</div> 
       <a href="">€50</a> 
      </div> 
     </div> 
     <div class="product"> 
      <div class="media"> 

      </div> 
      <div class="information"> 
       <div class="name">A Product</div> 
       <a href="">€50</a> 
      </div> 
     </div> 
     <div class="product"> 
      <div class="media"> 

      </div> 
      <div class="information"> 
       <div class="name">A Product</div> 
       <a href="">€50</a> 
      </div> 
     </div> 
     <div class="moreWrapper"> 
      <div class="more"></div> 
     </div> 
    </div> 

每一個後4 .product元素有一個.moreWrapper，然後再有4個.product元素，然後是另一個.moreWrapper。我努力實現的是讓最接近的點擊元素打開.moreWrapper，目前全部打開.moreWrapper。

這裏是我當前的javascript，

$(".product").click(function(e){ 
    $(this).find("a").addClass("set"); 
    var x = $(this).position().left; 
    $(this).parent().find('.moreWrapper').css("display", "none").animate({ 
     "height" : "0px", 
    }, 1000); 
    $(this).parent().find('.moreWrapper').css("display", "block").animate({ 
     "height" : "500px", 
    }, 1000); 
    $(".arrow").css("left", x+"px"); 

    return false 
}); 

Answer 1

試試這個：

$(".product").click(function(e){ 
    $(this).find("a").addClass("set"); 
    var x = $(this).position().left; 
    $(this).parent().find('.moreWrapper').css("display", "none").animate({ 
     "height" : "0px", 
    }, 1000); 
    $(this).parent().find('.moreWrapper').next().css("display", "block").animate({ 
     "height" : "500px", 
    }, 1000); 
    $(".arrow").css("left", x+"px"); 
return false; 
}); 

我GESS這是你所需要的，只是用來掩飾當前.moreWrapper，並顯示之後的下一個.moreWrapper。