Question

I’m having problems manipulating an element’s class attribute because I’ve added it to the DOM using .wrap(). It simply wont change the attribute at all, even though everything seems to be in order.

If I use something else than .wrap() or .wrapInner() everything works as expected. If I change .toggleClass() to an if/else if still wont work.

One could of course work around it but I’d rather find the root of the problem and learn something along the way.

Here’s the code in question:

$('.tour-category').each(function () {
    var tour_list = $(this);
    var header = tour_list.parent().find('h4');
    var link = $('<a>', {
        href: '#',
        'class': 'tour-category-toggler',
        click: function (e) {
            e.preventDefault();

            tour_list.slideToggle(200);
            link.toggleClass('close');
        }
    });

    tour_list.hide();
    header.wrap(link);
});

Maybe there’s something I’m missing, or is this perhaps a bug in jQuery?

Answer 1

try to change

link.toggleClass('close');

into

$(this).toggleClass('close');