Question

I need some help with removing some elements from my page with jQuery, currently I have PHP loop that builds links,

    <?php
    $findMore = array();
    $i = 0;
    foreach ($backgrounds as $row) :
?>
    <a id="<?=$i;?>" class="findOutMore" href="<?=$row['backgroundAddress']; ?>">Find Out More</a>
<?php
    $i++;
    endforeach;
?>

This creates links that have display none, on then each time the rel of link chages some where else in the HTML then a new link is displayed using this code,

function setCurrent(i){
    i = parseInt(i)+1;
    $("li", "#" + options.numericId).removeClass("current");
    $("li#" + options.numericId + i).addClass("current");
    var rel = $('ol#controls li.current a').attr('rel');
    if($('a#'+rel).hasClass('findOutMore')) {
        $('a#'+rel).css({
            display:'block',
        })
    }
};

So everytime the rel changes I get a new link on the page but i need the previous link to dissapear? Is this possible and how?

Answer 1

I’m not quite sure I understood your question, but if you want only one link with the ‘findOutMore’ class shown at a time, I would do the following (just at the end of your code):

var rel = $('ol#controls li.current a').attr('rel');
if($('a#'+rel).hasClass('findOutMore')) {
    $('a.findOutMore:visible').hide();
    $('a#'+rel).show();
}