jQuery确定ul是否有类或另一个答案

【问题标题】：jQuery determine if ul has class OR another onejQuery确定ul是否有类或另一个
【发布时间】：2010-07-08 15:11:38
【问题描述】：

确定一个对象是否具有一个类或另一个类的正确方法是什么？以下似乎是错误的..

if ($('#menu-item-49').hasClass('current-menu-item' || 'current-menu-parent') ) {
  $('ul.sub-menu ').css('display', 'block');
}

谢谢！

【问题讨论】：

标签： jquery if-statement

【解决方案1】：

您可以改用is 吗？

if ($('#menu-item-49').is('.current-menu-item, .current-menu-parent')) {
  $('ul.sub-menu ').css('display', 'block');
}

检查当前匹配的集合反对选择器的元素并返回如果这些元素中至少有一个，则为真匹配选择器。

不必使用多个 hasClass 查询，这是另一种选择：

if ($('#menu-item-49').hasClass('current-menu-item') || 
    $('#menu-item-49').hasClass('current-menu-parent')) {
  $('ul.sub-menu ').css('display', 'block');
}

【讨论】：

当然是！比写 hasClass() 更好 ||有类 || hasClass 一遍又一遍。
您的意思是把逗号放在引号内吗？ '.current-menu-item, .current-menu-parent' 目前第二个参数被忽略了。
性能意识的性能比较：jsperf is vs hasClass for multiple classes
使用 classlist.contains 获得更好的性能 - jsperf.com/is-vs-hasclass-for-multiple-classes/6

【解决方案2】：

您不能在hasClass 中使用||（或）运算符。试试这个：

if ($('#menu-item-49').hasClass('current-menu-item') || 
    $('#menu-item-49').hasClass('current-menu-parent')) {
  $('ul.sub-menu ').css('display', 'block');
}

如果过于冗长，您也可以这样做：

var $menuItem = $('#menu-item-49');
if ($menuItem.hasClass('current-menu-item') || 
    $menuItem.hasClass('current-menu-parent')) {
  $('ul.sub-menu ').css('display', 'block');
}

甚至更好：

var $menuItem = $('#menu-item-49');
if ($menuItem.is('.current-menu-item, .current-menu-parent')) {
  $('ul.sub-menu ').css('display', 'block');
}

【讨论】：

在您的上一个版本中，逗号不应该在引号内吗？ '.current-menu-item,.current-menu-parent' 我很确定 is() 只接受 1 个参数，但是这个解决方案的另一个答案做了同样的事情，所以现在我开始怀疑自己了。 :o)

【解决方案3】：

if ($('#menu-item-49').hasClass('current-menu-item') || $('#menu-item-49').hasClass('current-menu-parent') ) {
  $('ul.sub-menu ').css('display', 'block');
}

您是否尝试过以下方法？

【讨论】：

【解决方案4】：

您还可以使用.is() 来检查任何以current-menu- 开头的类，方法是：

if ( $('#menu-item-49').is('[class]^="current-menu-"') ) {
    //49 is the current menu!
}

^= 等更多属性选择器可以在here 找到。

【讨论】：

这个 sn-p 语法有问题。它应该是： if ( $('#menu-item-49').is('[class^="current-menu-"]') ) { //49 是当前菜单！ }

【解决方案5】：

以下是您的想法：

var menuItem49 = $('#menu-item-49');
if (menuItem49.hasClass('current-menu-item') || menuItem49.hasClass('current-menu-parent')) {
    // ...
}

【讨论】：

【解决方案6】：

如此接近！

试试：

if ($('#menu-item-49').hasClass('current-menu-item') || $('#menu-item-49').hasClass('current-menu-parent') ) {
  $('ul.sub-menu ').css('display', 'block'); 
}

【讨论】：

【解决方案7】：

改为这样，将其分成两部分：

if ($('#menu-item-49').hasClass('current-menu-item') || $('#menu-item-49').hasClass('current-menu-parent') ){
   $('ul.sub-menu ').css('display', 'block');
}

希望对你有帮助

【讨论】：