Jquery closest - what am I doing wrong here?

Question

I'm trying to get the id of the cont1 div when the anchor in expDelBtn (last anchor div) is clicked

<div id="tester" class="wrapper>">
    <div id="sf_129" class="cont1">
        <div class="cont2">
            <div class="nameCont"><table><tbody><tr><td>Shaun Thomson</td></tr></tbody></table></div>
            <div class="sexCont">Male</div>
        </div>
        <div class="btnCont">
            <div class="expFold"><a href="#">▲</a></div>
        </div>
        <div style="display: block;" class="exCont">
            <div class="exDel"><a href="#">X</a></div>
            <div class="exMov"><a href="#">MOVE</a></div>
            <div class="exPay"><a href="#">PAY</a></div>
        </div>
    </div>
    <div class="exp1">
        <div id="ro_129" class="exp2">
            <div class="exp3">
                <div class="expMsg">Hello there</div>
            </div>
            <div id="ex_267" class="expBtnCont">
                <div class="expUpBtn"><a href="#">↑</a></div>
                <div class="expDownBtn"><a href="#">↓</a></div>
                <div class="expDelBtn"><a href="#">X</a></div>
            </div>
        </div>
    </div> 
</div>

In my click func for expDelBtn, I have

alert($(this).closest(".cont1").attr("id"));

which shows nothing in the alert.

If I do

alert($(this).closest(".wrapper").attr("id"));

it shows "tester".

What can you use to get the "cont1" id? And why does closest not do it? Is it because the cont1 div is off a different branch of the DOM tree?

Thanks for your time and help.

Answer 1

because cont1 is not an ancestor of the button

It is the previous sibling of the closest .exp1 element

alert($(this).closest(".exp1").prev('.cont1').attr("id"));

or you can say, you need the cont1 element within the closest wrapper like(you have a > in the class name wrapper... remove it)

alert($(this).closest(".wrapper").children('.cont1').attr("id"));

Demo: Fiddle