Jquery的hasClass方法适用于多个类

Question

Jquery的hasClass方法适用于多个类

6

我遇到了一个问题，

<tr valign="top">
    <th class="chkCol fixed">..checkbox..</th>
    <th class="fixed">..head..</th>
</tr>

现在我在Jquery中调用一个函数，如下：

if($(this).hasClass("fixed")){
   ....
}

如果我调用$(this).hasClass("fixed")，那么我只需要获取头部而不是复选框，在Jquery 1.4.2中完美运行，但现在我更新到jquery 1.6.1。现在我在if条件内获取到了复选框。

请帮忙，提前感谢。

- Max

$(this).hasClass("fixed")将始终返回两个th元素，即使在旧版本中也是如此。您将需要过滤结果。 - ShankarSangoli

在jQuery 1.4.2中，这不可能以不同的方式运行。 - Pointy

好的，这是有趣的部分，这个错误出现在Firefox 4上。在IE上可以工作 :( - Max

5个回答

3

您可以选择以下两种方式：

if ($(this).attr('className') === 'fixed')

否则：

if ($(this).not('.chkCol').hasClass('fixed'))

我认为最好确保 "chkCol" 元素从一开始就不会获得 "fixed" 类。

编辑 - 眼光敏锐的 @T.J.Crowder 正确指出，自 jQuery 1.6 开始，使用 ".attr()" 从元素中获取属性值是错误的方式。关于为什么这样说需要进行一定程度的详细解释，但可以简单概括为现在应该使用：

if ($(this).prop('className') === 'fixed')

- Pointy

请注意，在v1.6.1中，attr('className')不起作用，因为"className"不是一个属性，而且1.6.x对此更加严格。只需使用this.className或者如果您真的想要做所有这些工作，则使用$(this).attr('class')。 :-) - T.J. Crowder

@TJ 我还没有升级 :-) 这在我的计划中，所以我肯定会找到一堆这样的问题（尽管我从来不做像那样获取类字符串的事情）（希望如此）。 - Pointy

1

看起来更新已经修复了一个错误，:) 这里的 hasClass("fixed") 应该对两个 th 元素都为 true。

至于你的问题，要么明确排除 chkCol 类：

if ($(this).hasClass("fixed") && !$(this).hasClass("chkCol")) {

或者找到其他标识你所寻找的元素的准则（标签名，ID，另一个专用类等）。

- Xion

+1 为了更快的打字速度... 我会说这是 1.4.2 版本中的一个 bug。 - skajfes

我注意到1.6.1不认识!(非)。 - Max

2

@Max：很抱歉，但是 jQuery 没有出错。问题在你的代码其他地方。 - T.J. Crowder

好的，! 是 JS 本身的一个特性，所以它可以在任何 jQuery 版本中使用 :) - Xion

我同意。但是当我只尝试使用!$(this).hasClass("chkCol")时，仍然进入if条件 - Max

@Max：那么，如果if语句中的先前条件为真，并且您使用了||或类似的运算符，则整个表达式即使您正在检查的部分不正确也为真。 - T.J. Crowder

1

那么，这一定是jQuery 1.4.2中的一个错误，因为显然<th class="chkCol fixed">..checkbox..</th>具有"class"为"fixed"的类。

如果您想获取仅带有"class"为"fixed"的元素，则可以执行

($(this).attr('class') == "fixed")

- DanielB

这是一个对象。如果我使用 $(this).attr('class') == "fixed"，那么根本不会进入if条件。 - Max

$(this)始终是一个对象。在这里，它必须是一个jQuery对象，指的是<th class="fixed">..head..</th>以满足该条件工作。你在什么情况下使用$(this)？在事件监听器中？ - DanielB

1

也许你应该使用attr()：

if($(this).attr("class") == "fixed"){
   ....
}

- Alexis No

那就是丹尼尔也建议的伙计。 - Max

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- T.J. Crowder · Accepted Answer

~~我会非常惊讶如果jQuery 1.4.2出现错误~~ jQuery 1.4.2不会出错。在所有版本的jQuery中，hasClass（“fixed”）都应为true。这里是一个使用v1.6.1的示例，以及使用v1.4.2的相同示例，两者都可以正常工作。

如果你想检查一个元素上是否只有“fixed”类，那么可以直接访问反映属性，而不需要使用jQuery进行更轻松的操作：

if (this.className === "fixed") {
    // ...
}

className是反映“class”属性的一个属性，并且像“class”属性一样，它是由空格分隔的字符串。

当然，如果元素上还有其他类，例如“fixed something-else”，则上述方法将失败。

如果您想要特别检查它是否具有“fixed”并且没有“chkCol”，那么您必须有意地这样做：

var $this = $(this);
if ($this.hasClass("fixed") && !$this.hasClass("chkCol")) {
    // ...
}

如果您在选择器中进行此操作（而不是检查您已经拥有的元素），则可以使用选择器".fixed:not(.chkCol)"。但是，尽管您可以使用is使用已经拥有的元素来执行此操作，但这是一种不必要的开销（jQuery必须解析选择器）。

更新: 您已经尝试了&& !$this.hasClass("chkCol")，但它没有起作用。这意味着if条件中的某些内容已经确定了表达式的整体结果，因此!$this.hasClass("chkCol")部分的结果并不重要（并且根本不会运行，因为JavaScript会短路表达式）。

示例：

var x = 1;

if (x == 1 || $this.hasClass("fixed") && !$this.hasClass("chkCol"))

在这种情况下，因为x是1，所以在||右侧的任何内容都不会被检查；表达式的值已经是true。

更新2：

你说你正在使用hasClass，但在另一个答案的评论中你说：

如果我使用$(this).attr('class') == "fixed"，那么根本不会进入if条件

我不确定你实际上是在做这个：

if ($(this).attr('className') == "fixed") {
    // ...
}

请注意，这里指的是“className”，而不是“class”。如果你正在使用后者，在1.6.1上将无法工作，但在1.4.2上可以。没有名为“className”的属性，但有一个名为“class”的属性和一个名为“className”的属性。jQuery 1.6.x区分属性和属性值。

我上面的代码中，使用hasClass将适用于所有版本。或者更改您的代码，使用attr("class")而不是attr("className")。这是一个v1.4.2示例，演示了attr("className")的工作方式（它不应该起作用）。这是一个v1.6.1示例，演示了attr("className")不起作用的正确方式。两个版本都展示了获取“class”属性的正确方法。