CODEWITHSUNDEEP
jqueryif-statement
nwindham
nwindham

Reputation: 361

jQuery determine if ul has class OR another one

what is the right way to determine if an object has one class OR another one? The following is appearantly wrong..

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

Thanks!

Upvotes: 36

Views: 27787

Answers (7)

djdd87
djdd87

Reputation: 68456

You could use is instead?

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

Check the current matched set of elements against a selector and return true if at least one of these elements matches the selector.

Beats having to use multiple hasClass queries, which is the alternative:

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

Upvotes: 76

jasongetsdown
jasongetsdown

Reputation: 1305

You can also use .is() to check for any class beginning with current-menu- by using:

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

More attribute selectors like ^= may be found here.

Upvotes: 1

Vivin Paliath
Vivin Paliath

Reputation: 95508

You cannot use the || (or) operator within hasClass. Try this:

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

Or you can do this if that's too verbose:

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

Or even better:

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

Upvotes: 2

Marcos Placona
Marcos Placona

Reputation: 21720

Do it like this instead, separating it in two bits:

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

Hope this helps you

Upvotes: 0

Trefex
Trefex

Reputation: 2320

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

Have you tried the following?

Upvotes: 1

HurnsMobile
HurnsMobile

Reputation: 4381

So close!

Try:

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

Upvotes: 0

BalusC
BalusC

Reputation: 1108632

The following is what you've in mind:

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

Upvotes: 0

Related Questions