Question

I am trying to figure out if a link inside a LI has a class. How do I do this? Here’s what I’ve been trying so far:

(Trying to hide specific li’s)

<a class="filtergallery" id="p" href="#">Portraits</a> <a class="filtergallery" id="n" href="#">Newborn</a> <a class="filtergallery" id="pe" href="#">Pets</a>

<ul class="portfolio-wrap">

<li><a class="p" href="#" title="First Pic"><img src="#" alt="First Pic" /></a></li>
<li><a class="pe" href="#" title="Second Pic"><img src="#" alt="Second Pic" /></a></li>
<li><a class="n" href="#" title="Third Pic"><img src="#" alt="Third Pic" /></a></li>
<li><a class="pe" href="#" title="Fourth Pic"><img src="#" alt="Fourth Pic" /></a></li>

jQuery:

        $('.filtergallery').click(function(event){

        var theid = $(this).attr('id');
        $('.portfolio-wrap li').each(function(){

            if (!hasClass(theid)) { // I need to see if the hyperlink inside the LI has this class...?
                hide();
            }

        });

    })

Answer 1

You’d need to actually select the anchor tags in your selector. Take a look at this fiddle. Additionally, the code that you have won’t unhide the links based on the click (it is only hiding upon click, not unhiding when another link is clicked — if that is a requirement). You might want to create a function that shows all the links and invoke that upon click and then subsequently hide the applicable links.

http://jsfiddle.net/UV7nS/

<a class="filtergallery" id="p" href="#">Portraits</a> <a class="filtergallery" id="n" href="#">Newborn</a> <a class="filtergallery" id="pe" href="#">Pets</a>

<ul class="portfolio-wrap">

<li><a class="p" href="#" title="First Pic"><img src="#" alt="First Pic" /></a></li>
<li><a class="pe" href="#" title="Second Pic"><img src="#" alt="Second Pic" /></a></li>
<li><a class="n" href="#" title="Third Pic"><img src="#" alt="Third Pic" /></a></li>
<li><a class="pe" href="#" title="Fourth Pic"><img src="#" alt="Fourth Pic" /></a></li>

​

$('.filtergallery').click(function(event){

        var theid = $(this).attr('id');
        $('.portfolio-wrap li a').each(function(){

            if (!$(this).hasClass(theid)) { // I need to see if the hyperlink inside the LI has this class...?
                $(this).hide();
            }

        });

    })​