Question

HTML结构

<div class="menu_item cf">
    <div class="menu_desc">
        <h4><a href="#">Garlic Bread Sticks</a></h4>
        <p>Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare.</p>

        <div class="social_links cf">
            <a href="#" class="fb">facebook</a>
            <a href="#" class="tw">twitter</a>
        </div>

        <div class="menu_links">
            <a class="btn_yellow">detail</a>
            <a class="green_btn_right_arrow order_btn">order</a>
            <p class="item_price">AED 18</p>
        </div><!-- menu_links -->
    </div><!-- menu_desc -->

    <div class="img_cont">
        <a href="#"><img src="images/menu_item_img1.png" alt=""></a>
    </div><!-- img_cont -->

    <div class="clear"></div>

    <div class="order_cont cf">
        <img src="images/order_arrow_up.png" alt="" class="menu_order_arrow" />
        <form method="post" action="" name="">
            <label>
                <span>Quantity</span><br>
                <input type="text" name="quantity" placeholder="Quantity" />
            </label>

            <div class="float-l">
                <span>Quantity</span><br>
                <div class="selc_cont">
                    <select>
                        <option>Small</option>
                        <option>Large</option>
                    </select>
                </div>
            </div>

            <a href="#" class="black_btn_right_arrow">Add to Cart</a>
        </form>
    </div><!-- order_cont -->
</div><!-- menu_item -->

我想要的是在点击课程div按钮时找到名为order_cont的第一个order_btn。因为它将列出，所以我只希望第一个div具有类名order_cont。

我尝试的是

$('.order_btn').nextAll('.order_cont:first');

另外

$('.order_btn').dblclick(function(e) {
    $(this).closest('.order_cont').slideToggle('fast');
});

但没有运气。任何帮助将不胜感激。感谢

Answer 1

nextAll没有用，因为div不是＆＃34;按钮的兄弟。＆＃34;

你需要先去兄弟姐妹。除非HTML缩进具有误导性，否则menu_desc似乎是相关的兄弟，所以：

$(".order_btn").on("relevant-event", function() {
    $(this).closest(".menu_desc").nextAll(".order_cont").first().slideToggle('fast');
});

（如果相关活动为dblclick，请将relevant-event替换为dblclick以上。）

Answer 2

尝试

$(this).closest('.menu_item').find('.order_cont').slideToggle('fast');

通过jQuery查找复杂结构中的类

2 个答案: