Question

Sorry for the confusing question but here’s what i’m trying to do. I have a page with multiple (ul) items. I’m using jquery to manipulate the classes of the (ul)’s and (li)’s. What i’m trying to do is treat each (ul) as an individual as oppose to a whole. For example my:

<ul class="bNav">
  <li><a href="#">Home</a></li>
  <li><a href="#">The Artists</a></li>
  <li><a href="#">The Art</a></li>
</ul>

<ul class="bNav opp">
  <li><a href="#">Home</a></li>
  <li><a href="#">The Artists</a></li>
  <li><a href="#">The Art</a></li>
</ul>

What i’m trying to do with my jquery is if the ‘opp’ class is present then add a certain code to it. If it’s not there then do something else. The problem i’m having is that when i do an if check, if the class is present, it will treat all (ul)’s as if they have that class. Here’s my code:

if ($('.bNav').is('.opp')) {
    $('.bNav').addClass('nav').wrap('<nav class="navbar navbar-inverse"><div class="navbar-inner">');
} else {
    $('.bNav').addClass('nav').wrap('<nav class="navbar"><div class="navbar-inner">');
}

$('.bNav > li > ul').addClass('dropdown-menu').parent('li').addClass('dropdown').find('a:first').attr('data-toggle', 'dropdown').addClass('dropdown-toggle').append('<span class="caret"></span>');  
$('.bNav ul ul').addClass('dropdown-menu').parent('li').addClass('dropdown-submenu');

Again, the code is treating all (ul)’s as one. so if the class “opp” is present in any of the (ul)’s, then it fires off the if statement for the “opp” class for ALL the (ul)’s. How do i make it work so that each individual (ul) is treated as such? Thanks for your help in advance!

damien

Answer 1

From the docs:
.is()
Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.

Try:

$('.bNav.opp').addClass('nav').wrap('<nav class="navbar navbar-inverse"><div class="navbar-inner">');
$('.bNav').not('.opp').addClass('nav').wrap('<nav class="navbar"><div class="navbar-inner">');