jQuery查找要單擊的最接近的元素

Question

當我單擊頁面上的鏈接時，我試圖觸發顯示/隱藏效果，設置頁面的方式是我具有以下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;
});

我想這就是您所需要的，只是隱藏當前的.moreWrapper ，並在其后顯示下一個.moreWrapper 。