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> 

I次のマークアップを複数回あり、各クリックは、それがクリックされた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を見つける必要があります。 parentで行くことに

Answer 1

、あなたは右の親を取得するため、closestの上に行かなければならない：

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

最良の方法は.parentのように、親にselectabeクラスを与えることになります：

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

Answer 2

問題はparents()がすべての親要素を取得するため、すべての親要素をループし、含まれているすべての.extra-suppliers要素を繰り返し表示するように設定しているためです。

代わりにclosest()を使用して、固定の単一の親を見つけることができます。next()。これを試してみてください：それは良いだろうという

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

注親divを取得するために、4つのスタイリングクラスを使用するのではなく、親要素の上に単一のクラスを置くために、私は単純に作業例を作成するためにここにそれをやりました。

Answer 3

優れた第1の選択ブロックとアクションを作るか、またはparents('selector')にセレクタを追加し、以下の例を見て、その後、変数に保存しますので、セレクタ

$(document).ready(function(){ 
 
    var row = $('div.four.wide.column'), 
 
     button = row.find('.mobile-select-supplier>a'), 
 
     block = row.next('.extra-suppliers.mobile.only'); 
 
    
 
    $(button).click(function(){ 
 
    //block.toggle(); 
 
    $(this).parents('div.four.wide.column').next('.extra-suppliers.mobile.only').toggle(); 
 
    }); 
 
     
 
});

.four.wide.column.dashed{ 
 
    background-color:#fff; 
 
    color: #333; 
 
    line-height: 2em; 
 
} 
 
.extra-suppliers.mobile.only{ 
 
    background-color: red; 
 
    width: 100px; 
 
    height: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>