What does brackets and parentheses after jquery selector mean?

Question

I ran into this line of code and I can't figure out what it means:

$("#theAppContainer")[s > u ? "addClass" : "removeClass"]("something");

I understand the first part is selecting the element called theAppContainer and the second part evaluates to "addClass" if s > u, but I can't figure out what this line of code does overall.

Answer 1

The bracket syntax gets the value of a property by name, and the parentheses call the function that is the value of that property. It’s equivalent to:

var container = $('#theAppContainer');

if(s > u) {
    container.addClass('something');
} else {
    container.removeClass('something');
}

Also, please never write code like that. =)

Also also, toggleClass takes a second switch argument that you can use instead:

$('#theAppContainer').toggleClass('something', s > u);