1

div内のスパンにクリックイベントを追加しています。表示されるこのイベントのターゲットは、2div下のdiv内にある最初のdivです。DOMをトラバースして見つけるにはどうすればよいですか？

おそらく、コードでより明確になるでしょう：

<div a>
    <h2>
        <span id="here">Click</span>
    </h2>
</div>

<div></div>

<div>
    <div class="targetDiv">This is the div we need to find</div>
    <div class="targetDiv">There are other divs with the same id, but we don't need to find   those</div>
    <div class="targetDiv">Not looking for this one </div>
    <div class="targetDiv">Or this one either</div>
</div>

左右を検索しましたが、答えが見つかりません。イベントをスパン直後の最初のdivのみに制限することが重要です。

どんな助けでも大歓迎です。

4

3 に答える 3

2

示されているように、コードは次のようになります。

$('span#here').on('click', function() {
    $(this).closest('div').siblings(':contains(.targetDiv)').children().eq(0).show();
}
于 2012-04-21T02:57:28.693 に答える
1

これが私たちが釣った魚のサンプルです

$(function() {
    $('#here').on('click', function() {
        var div = $(this)          //the element clicked
            .closest('div')        //find nearest parent div
            .nextAll(':eq(1)')     //find the second next div
            .children(':eq(0)')    //find the first child of it
            .show();               //remove invisible cloak
    });
});​
于 2012-04-21T03:04:04.037 に答える
0

これは機能します。HTMLファイルに保存して自分でテストできる例を示しました

<style>
.targetDiv{display:none;}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$('#here').click(function(){
$('.targetDiv').first().show(); // or whatever you want
});
});
</script>

<div a>
    <h2>
        <span id="here">Click</span>
    </h2>
</div>

<div></div>

<div>
    <div class="targetDiv">This is the div we need to find</div>
    <div class="targetDiv">There are other divs with the same id, but we don't need to find   those</div>
    <div class="targetDiv">Not looking for this one </div>
    <div class="targetDiv">Or this one either</div>
</div>
于 2012-04-21T03:33:46.730 に答える