jQuery selector unintelligible issue

Question

I have following example

What it should do:

• check is there .box-wrapper in the doc
• if yes and there is an click event on .tabs li a
• find .selected and set class to empty string
• find parent of this - clicked link and add .selected

And in the last step it is failing as you can see. console.log( $('this').parent('li') ); = []

Why? What is wrong? Any suggestion much appreciated.

Answer 1

this is an DOM object, not a selector string, so you need:

$(this).parent('li').addClass('selected');
console.log($(this).parent('li'));

instead of:

$('this').parent('li').addClass('selected');
console.log($('this').parent('li'));

$('this') will cause jQuery to construct an object which wraps all elements matching your selector. 'this' is not a valid selector, so you get that 'selector unintelligible' error, whereas $(this) refers to the jQuery-wrapped clicked anchor.

Answer 2

not sure what box wrapper has to do with it but this click function should work:

$(".tabs li a").click(function(){
     $(".tabs li").removeClass("selected");
     $(this).parent().addClass("selected");
}