Question

I’m adding a click event to a span that is within a div. The target of this event, which will become visible, is a first div that is within a div, two divs down. How can I traverse the DOM to find it?

Perhaps it’ll be clearer with the code:

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

I’ve searched left and right and cannot find an answer. It’s important to restrict the event ONLY to the first div immediately after the span.

Any help would be much appreciated.

Answer 1

This works. I provided an example you can just save to a html file and test it yourself

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