javascript - 使用 jQuery 通过单击访问外部根 div

Question

当我单击 .mobile-select-supplier a 时，我尝试访问 div .extra-suppliers.mobile.only。完整代码如下:

<div>
    <div class="four wide column dashed">
       <div class="ticket-buy-block">
          <div class="price-block">
             <span class="ticket-main-price">2615Kč</span>
             <span class="ticket-main-total">Total: Kč2669</span>
             <div class="mobile-select-supplier">
                <a class="ui button ticket-buy-button primary-color">
                   <div class="mobile only book-chevron">
                      Select
                   </div>
                </a>
             </div>
          </div>
          <div class="flight-proposals">
             <a href="#" class="ticket-proposals" target="_blank">
                <span class="proposal-name">Kiwi.com</span>
                <span class="proposal-amount">
                   Kč1427
                </span>
             </a>
             <div class="suppliers">
                <div class="trip-options"><a><i class="small circular info icon"></i><span class="label">See Details</span></a></div>
             </div>
          </div>
       </div>
    </div>

    <div class="extra-suppliers mobile only" style="display: none;"></div>
</div>

我多次使用以下标记，每次点击都需要找到位于与所点击的 a 元素相关的 div 内的 .extra-suppliers 。我试过这个:

$( '.mobile-select-supplier a' ).click(function( event ) {
  $( this ).parents().find('.extra-suppliers.mobile.only').css('display','block');
});

它可以工作，但会在所有 .extra-suppliers 上触发 css()。我需要一种没有 parents() 的替代方法来查找根 div 和距离按钮最近的 .extra-suppliers div。

Answer 1

要使用parent，您必须遍历closest，以获得正确的parent:

$('.mobile-select-supplier a').click(function() {
    $(this).closest('.four.wide.column.dashed').parent().find('.extra-suppliers.mobile.only').show();
});

最好的方法是给父级一个 selectabe 类，例如 .parent:

$('.mobile-select-supplier a').click(function() {
    $(this).closest('.parent').find('.extra-suppliers.mobile.only').show();
});