jQuery 当类属性包含多个类名时查找类 (class="classA classB classC")

Question

我有一个像这样的 div 结构 [简单菜单]：

<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>

当我单击类名为“default”的任何 div 时，我想：

1. 使用 .removeClass().addClass() 交换类将“selected”更改为“default”
2. 将最近单击的 div（class==“default”）更新为 class==“selected”

当类标签仅包含一个类名（例如：class="default"）时，此方法可以正常工作和 class="selected") 但是当有在单个类标签内以空格分隔的类名列表，事情进展得不太顺利。

问题： 当单个标签内有多个类名时，如何找到 class=="selected" 的元素？

任何帮助都将不胜感激......

Answer 1

您似乎正在尝试制作导航菜单。最简单的方法是：

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

但这并不能直接回答您的问题。为了“查找”另一个元素的子元素，请使用 find() 方法：

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

如果您想跳过额外的 find() 调用，您可以可以将点连接在一起：

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

Answer 2

$('.default').click(function(){
    $('.selected').removeClass('selected').addClass('default');
    $(this).removeClass('default').addClass('.selected');
});