Question

I have a div structure like this [simple menu]:

<div class="float menuA">
    <div class="float selected"></div>
    <div class="float default"></div>
    <div class="float default"></div>
    <div class="float default"></div>

    <div class="clear"></div>
</div>

When I click on any div with a classname of “default” I would like to:

1. Use .removeClass().addClass() to swap the class called “selected” to “default”
2. Update the recently clicked div (with class==”default”) to class==”selected”

This approach works fine when the class tags contain exactly ONE classname (for example: class=”default” and class=”selected”) but when there is a space seperated list of classnames within a single class tag, things dont go so smoothly.

Question:
How do I find the element with class==”selected” when there are multiple classnames within a single tag?

Any help appreciated guys….

Answer 1

It looks like you’re trying to make a navigation menu. The easiest way to do this is:

$(function() {
    $('div.menuA div.float').click(function() {
        $(this).siblings('.selected').removeClass('selected').addClass('default');
        $(this).removeClass('default').addClass('selected');
    });
});

This doesn’t directly answer your question though. In order to ‘find’ an element that’s a child of another element, use the find() method:

// finds all divs with class 'selected' in the div.menuA div
$('div.menuA').find('.selected');

And if you want to skip the extra find() call, you can just concatenate the dots together:

// selects divs with the classes 'selected' and 'default'
$('div.menuA div.selected.default');