Check if element hasClass(), if not, remove child

Question

http://jsfiddle.net/ebbymac/pKZ9U/

This is using the jQuery Cycle plugin... What it's doing is, as you hover over each list item, the slide is changed and its corresponding list item has the class activeSlide added. What I'm trying to do is append HTML to the list item with the activeSlide class, and remove it when when the next list item is hovered over.

This code almost works. It appends my HTML to the activeSlide on load, but when I hover over the next list item, nothing changes. In the fiddle, you'll see that "Title 1" with the black background stays even when the slide changes.

Basically, I'm wondering how to check if an element has a class, and if it does, append something. If the class no longer applies, remove what was appended.

$(document).ready(function() {
    var titles = ["Title 1", "Title 2", "Title 3"];
    $("#slideshow").before("<ul id='slideshow-nav'></ul>")
    .cycle( {
        fx:                         "scrollVert",
        rev:                        "scrollVert",
        speed:                      600,
        timeout:                    0,
        pagerEvent:                 "mouseover", 
        pager:                      "#slideshow-nav",
        pagerAnchorBuilder: function (index) {
            return "<li>" + titles[index] + "</li>";
        }
    });
    if($("#slideshow-nav li").hasClass("activeSlide")) {
        var ind = $("#slideshow-nav li").index();
        $("#slideshow-nav li.activeSlide").append("<a href='#'>" + titles[ind] + "</a>");
    } else {
        if($("#slideshow-nav li:not(.activeSlide)")) {
            $("a").remove();
        }
    }
});

Answer 1

As pointed out by @bbird, your if-statements execute only one.

Perhaps you can use the onPagerEvent callback to add and remove the <a> tag to the active list item.

First add the following function:

function activateItem(index) {
    $('#slideshow-nav').children('li').each(function (i) {
        var $item = $(this);
        if (i == index) {
            if ($item.children('a').length == 0) {
                $item.append('<a href="#">' + titles[i] + '</a>');
            }
        } else {
            $item.children('a').remove();
        }
    });
}

Then call it once at the start:

activateItem(0);

And in the onPagerEvent callback:

    onPagerEvent: function (index) {
        activateItem(index);
    }

jsfiddle demo

Edit: Updated the if-statement in the activateItem() function so the <a> element is appended to the list item's content, rather than replaces it.

Answer 2

Wrapping your check/append in .hover() functions will make it occur when there's mousein/mouseout:

$("#slideshow-nav li").hover(
    function () {
        if ($(this).hasClass("activeSlide")) {
            var ind = $("#slideshow-nav li").index();
            $("#slideshow-nav li.activeSlide").append("<a href='#'>" + titles[ind] + "</a>");
        }
    }, 
    function () {
        if($("#slideshow-nav li:not(.activeSlide)")) {
            $("a").remove();
        }
    }
 );