顯示'最近'div

不知道是否有人可以指向正確的方向在這裏，我試圖在頁面上顯示'next'元素與匹配的類名稱，即直接在鏈接下面的那個。顯示'最近'div

$(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股利是隱藏的（jQuery的），我試圖找到並顯示被點擊的show_hide鏈接時。

但我似乎無法得到該div的處理。請有人指出我正確的方向嗎？

感謝， Ç

來源

2017-08-02 SxChoc

$（本）.closest得到最接近父匹配選擇 –

的問題是因爲closest()搜索了DOM找到父元素，然而.std-centered DIV是父母的兄弟姐妹，因此不會被發現。

爲了解決這個問題，你可以改用closest()找到.row，那麼next('.row')，最後find()得到你想要的元素，像這樣：

$(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>

來源

2017-08-02 08:47:10

您好，感謝這......這實在是奇怪。它在你的代碼片段中工作，但不能在我的頁面上工作！沒有任何開發者控制檯錯誤沒有發生！ – SxChoc

使用此選擇器$(this).closest('div.row').next(".row").find('.std-centered').show();
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>

來源

2017-08-02 08:48:17 guradio

顯示'最近'div

回答

相關問題