CODEWITHSUNDEEP
jquery
Jeremy
Jeremy

Reputation: 973

Get to the child of parent, jquery

I have this code:

<div class="Slideshow homeSlideshow">
    <div class="jshowoff jshowoff-1" style="position: relative;">
    <ul style="position: relative;">
        <li class="Slide" title="Trailer" style="left: auto; right: 0px; top: auto; bottom: auto; position: relative;">
            <a target="_blank" href="http://www.youtube.com/watch?v=123456" title="xxx"></a>
        </li>
    </ul>
    <p class="jshowoff-slidelinks jshowoff-1-slidelinks">
        <a class="jshowoff-slidelink-0 jshowoff-1-slidelink-0" title="undefined" href="#null" style="width: 30.3333%;">
            Trailer
        </a>
    </p>
    </div>
</div>

And I'm in p class jshowoff-slidelinks. What I need, that on clicking the a inside of this p, I go to the href that's inside the li class slide.

Any idea?

It's like, go to the href to the child of parent, something of that sort.

Thing is, this is part of a slideshow code, and hence the li keeps changing as the slide moves.

Upvotes: 0

Views: 183

Answers (5)

Sridhar Narasimhan
Sridhar Narasimhan

Reputation: 2653

Bind the event for click and in the event get the element and check for parent and find the anchor tag that is desired 

 var p = $("p.jshowoff-slidelinks");
 p.click(function(){
 window.location = $(this).parent().find("ul>li>a").attr("href");
 });

Check the below jsfiddle

http://jsfiddle.net/LSwvG/3/

Use Window.loaction to redirect

Thanks

Upvotes: 1

Adil
Adil

Reputation: 148110

Try this,

Live Demo

$('.jshowoff-slidelinks.jshowoff-1-slidelinks').click(function(){

    alert($(this).closest('.jshowoff.jshowoff-1').find('li a').attr('href'));

});​

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1073968

I'd probably go with closest and find:

$("p.jshowoff-slidelinks").click(function() {
    var href = $(this).closest("div.Slideshow").find("li.Slide a").attr("href");
    if (href) {
        window.location = href;
    }
    return false;
});

Upvotes: 1

Ohgodwhy
Ohgodwhy

Reputation: 50767

$('[class^=jshowoff-slidelink]').click(function(e){
    e.preventDefault();
    window.location = $(this).closest('.Slideshow').find('.Slide a').prop('href');
});

calling .parent() does not make use of querySelectorAll which has performance implications. .closest(), however, will, and has the better performance.

I've used class^ or class begins with incase you have multiple instances of that link. window.location will tell the browser to load the string provided after the = which in this case, is the anchor element within the .slide element. We simply took the href property from this anchor.

Upvotes: 1

Diego
Diego

Reputation: 16714

$("p a").click(function() {
  var div = $(this).parent().parent(),
    a = div.find("ul a"),
    href = a.attr("href");

  window.location = href;
});

Upvotes: 1

Related Questions