「最も近い」divを表示

Question

誰かが正しい方向を指すことができる場合は、ページ上に一致するクラス名、つまりリンクのすぐ下にある「次の」要素を表示しようとしています。

$(function() { 
 
    $("div.std-centered").hide(); 
 
    $("a.show_hide").click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).closest('div.std-centered').next().show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-sm-4 col sameHeight"> 
 
    <p>Some blurb <a href="#" class="show_hide">i</a></p> 
 
    </div> 
 
    <div class="col-sm-2 col text-center sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
    <div class="col-sm-2 text-center col sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
    <div class="col-sm-2 text-center col sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
    <div class="col-sm-2 text-center col sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-sm-12 std-centered"> 
 
    <p>This is the content</p> 
 
    </div> 
 
</div>

クラスstd-centeredを持つdivが（jQueryの中で）隠されていると私は見つけるとshow_hideリンクがクリックされたときに、それを表示しようとしています。

しかし、私はそのdivのハンドルを取得できないようです。誰かが正しい方向に私を向けることができますか？

おかげで、 C

Answer 1

closest()検索アップDOMの親要素を見つけるために、まだ.std-centered div要素は親の兄弟であるため検出されませんので、問題があります。

$(function() { 
 
    $("div.std-centered").hide(); 
 
    
 
    $("a.show_hide").click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).closest('.row').next('.row').find('div.std-centered').show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="row"> 
 
    <div class="col-sm-4 col sameHeight"> 
 
    <p>Some blurb <a href="#" class="show_hide">i</a></p> 
 
    </div> 
 
    <div class="col-sm-2 col text-center sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
    <div class="col-sm-2 text-center col sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
    <div class="col-sm-2 text-center col sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
    <div class="col-sm-2 text-center col sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-sm-12 std-centered"> 
 
    <p>This is the content</p> 
 
    </div> 
 
</div>

Answer 2

1. これを使用する：あなたは、代わりにこのように、あなたが望む要素を取得し、その後next('.row')、最後にfind()、.rowを見つけるためにclosest()を使用することができ、この問題を解決するには

   セレクタ$(this).closest('div.row').next(".row").find('.std-centered').show();

2. Closest() - >最初の親ウィジェットを見つけるhは

$(function() { 
 
    $("div.std-centered").hide(); 
 
    $("a.show_hide").click(function(e) { 
 
    e.preventDefault(); 
 
    $(this).closest('div.row').next(".row").find('.std-centered').show();// since element std-centered is found in row tthat is next to row that is closest to show_hide 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-sm-4 col sameHeight"> 
 
    <p>Some blurb <a href="#" class="show_hide">click</a></p> 
 
    </div> 
 
    <div class="col-sm-2 col text-center sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
    <div class="col-sm-2 text-center col sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
    <div class="col-sm-2 text-center col sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
    <div class="col-sm-2 text-center col sameHeight"> 
 
    <p><span class="glyphicon glyphicon-ok"> </span></p> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-sm-12 std-centered"> 
 
    <p>This is the content</p> 
 
    </div> 
 
</div>