CODEWITHSUNDEEP
jquery
django
django

Reputation: 2909

jquery selecting parent element

I am trying to find href attribute of a which is in class front while the button is in class footer. Cant seem to make it to work.

JSFIDDLE:

HTML

<div class="panel">
    <div class="front"> 
        <a rel="lightbox" href="asas/as/abc.html">
            <img width="200" height="125" src="http://www.wired.com/wiredenterprise/wp-content/uploads//2012/10/stormtroopers-sm.png"  >
        </a>
        <div class="footer">
            <button class="btn btn-mini" rel="btn_scr"><i class="icon-fullscreen"></i> </button>
        </div>
    </div>
    <div class="back" style="width: 200px; height: 157px;">something here</div>
</div>

JAVA

$('body').on('click', '[rel=btn_scr]', function (event) {
    event.preventDefault();
    var data = $(this).parents(".front > a").attr("href");
    alert(data);
    //console.log(data);

});

Upvotes: 0

Views: 50

Answers (3)

Phil
Phil

Reputation: 164733

The problem is .front > a is never a parent of your button. You need to traverse up to the parent (.front) then down to the anchor, eg

var data = $(this).closest('.front').find('> a').attr('href');

Update: Swapped out parents() for closest() as it's a better fit for this operation. The differences are illustrated on the closest() documentation

Upvotes: 6

Paritosh
Paritosh

Reputation: 11560

You can try this

$(this).parents(".front").find('a').attr('href')

here is the updated jsfiddle

Upvotes: 1

sangram parmar
sangram parmar

Reputation: 8726

try this

http://jsfiddle.net/C5R7u/2/

var data = $(this).closest(".front").find('a').attr("href");

Upvotes: 2

Related Questions