使用 jquery 将类设置为元素答案

【问题标题】：using jquery to set class to an element使用 jquery 将类设置为元素
【发布时间】：2012-11-26 16:23:45
【问题描述】：

我得到了以下 HTML：

<ul class="specs">
        <li>
            <div class="trigger">› City (2)</div>
            <div class="cityByLocation">
                <ul>
                    <li class="cityInfo">
                        <div class="cityName" style="float: left;">
                            › New York
                        </div>
                        <div class="cityDistance" style="float: left;">
                            430 miles
                        </div>
                        <div class="btn-take"></div>
                    </li>
                    <li class="cityInfo">
                        <div class="cityName" style="float: left;">
                            › Chicago
                        </div>
                        <div class="cityDistance" style="float: left;">
                            430 miles
                        </div>
                        <div class="btn-take"></div>
                    </li>
                </ul>
            </div>
        </li>
<ul>

当我点击“City (2)”时，下面的两个 div 都会出现。但是，我想为他们添加一个类。

这是我现在的 js：

$('.trigger').click(function ()
    {
        $(this).siblings('div').eq($(this).index()).toggle();

        $(this).eq($(this).index()).toggleClass("locationSelected");

        return false;
    });

这会在名称“City (2)”后面添加蓝色背景，但不会添加我想要的底层 div。

它是类“cityByLocation”的 div，我想将类 locationSelected 添加到。

编辑：

我最终使用了

$('.trigger').click(function () { $(this).siblings('div').eq($(this).index()).toggle(); $(this).toggleClass("locationSelected"); $(this).siblings('div').eq($(this).index()).toggleClass("locationSelected");
return false; });

【问题讨论】：

$(this).eq($(this).index()) 和 $(this) 不一样吗？
看来你是对的。我对 jquery 选择感到很困惑

标签： javascript jquery css

【解决方案1】：

不要使用toggleClass，而是使用addClass

$(this).eq($(this).index()).addClass("locationSelected");

【讨论】：

+1 以获得在 OP 代码上下文中的正确答案，但如果我错了，请纠正我... $(this).eq($(this).index()) === $(这个)
$(this).addClass("locationSelected");在这里更有意义

【解决方案2】：

$(this).siblings('.cityByLocation').addClass("locationSelected");

如果您只想添加类，请使用它，但如果您想在交替点击时将其删除，请使用 toggleClass。

【讨论】：

这似乎最接近答案，但它仍然不起作用。我以前也试过这个。还有其他想法吗？
这行得通。我的 div 中的浮动一开始看起来好像没有。
我似乎无法将 li "cityInfo" 保持在一行。如果我不能浮动它们有什么想法吗？
你可以，但你必须给他们明确的宽度。如果仍有疑问，您可以提出一个单独的问题（在此处扩展此讨论将是题外话）。
完成。 stackoverflow.com/questions/13569589/…

【解决方案3】：

.addClass("locationSelected");

【讨论】：

【解决方案4】：

我建议，假设您要将类名添加到嵌套在相邻的 div 和 ul 内的 div 元素中：

$(this).next('.cityByLocation').find('div').addClass('locationSelected');

【讨论】：