0

Can jQuery perform an "if" function? As in, if a class exists in one menu item, apply that class to a different menu item? This is slightly different than the usual active page menu highlighting, as I'm dealing with active dropdown menus and child pages.

What I'd like to do is

(the usual suspect) $(document).ready(function() {

If...

$('#menu-main-menu li.menu-item-1061') "contains the classes
current-menu-ancestor current-menu-parent"

    then add those same classes to, i.e.:

    $('#menu-main-menu li.menu-item-1099').addClass('current-menu-ancestor
current-menu-parent')

}); });

Should be a way for this to work....

4 Answers 4

9

jQuery is not a language, it is a library for JavaScript. The answer is: "Yes, JavaScript has if statements as part of the language."

I don't understand the pseudo-logic you have written. What do you mean by "If [some list item] 'contains the classes' [foo] [bar]"? If the list item has both of those classes? Either of those classes? Or if the list item has a descendant with at least one of those classes? Or if the list item has one or more descendants that have all of those classes?

Here is a solution using one interpretation:

jQuery(function($){
  var li = $('#menu-main-menu li.menu-item-1061');
  if ( li.find('.current-menu-ancestor, .current-menu-parent').length ){
    // do whatever you want here.
  }
});
1
  • It's "pseudo-logic" because that's the only way I know how to describe it. Looks like this will work, but I ended up finding a different way to accomplish what I needed with an if else php function to determine the body class of the page and then fire the add.Class. Commented Jan 5, 2011 at 5:15
2

Just make a proper if statement on the existence of this?

$('#menu-main-menu li.menu-item-1061.current-menu-ancestor.current-menu-parent')
2

Javascript can perform if statement, but in jQuery you can use is function to determine if any jquery object fit another expression.

for example, you have this jquery object

var firstObj = $(".selector1")

and you want to test if any of the element fit this expression

".selector2"

then you can use is as follows

firstObj.is(".selector2")

If any element fits then the response will be 'true', otherwise 'false'. so you can combine with javascript's if as follows

if (firstObj.is(".selector2")){
    // you can do something here
}

hope it helps

1
  • Thanks, seems like this would work. I ended up doing something different with php and add.Class. Commented Jan 5, 2011 at 5:18
2

As pointed out, if is a construct of JavaScript, not jQuery in particular. I think what you're looking for is the jQuery function hasClass, which can check DOM elements against the name of a class and will return true if the element currently has that class.

You can use it like this:

if (myElement.hasClass("myClass")) {
    // do something
}

Inside the if construct, you can insert the code you want to add the classes to the other elements.

Updated: Your example is a bit strange, in that you seem to wish to ask "does a set of elements matched against this selector have the classes current-menu-ancestor and current-menu-parent?" This is odd because you are matching a set of elements (your most specific selector is a class, so might return more than one item). It seems that you might have a design error in your HTML/CSS, since the class menu-item-1061 sounds like it should be an ID (it's unique), not a class. Either way, the hasClass function will still work for you, since it returns true if any of the matched elements have the class.

1
  • Thanks, I will have to look more into hasClass. The code is from a Wordpress generated menu and it deals with different kinds of active menu items and child pages. Commented Jan 5, 2011 at 5:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.