How to say with variables: If this id matches this class don't do this

Question

In words, I want to say, If the body Id is not equal to a list item's class execute the following function, I have tried to get the code right but nothing seems to work.

I have 4 pages each with an ID to make the active state work in a css sprite that work great. On top of that I added between normal and hover a jquery opacity effect but the problem is that when I hover the active state It also changes to hover and I want the active sprite to stay put when hover, anyhelp would be appreciated, Saludos.

Html:

<ul id="nav">
    <li class="home"><a href="index.html" title="Home Page">Home</a></li>
    <li class="portfolio"><a href="portfolio.html" title="Portfolio Page">Portfolio</a></li>
    <li class="contact"><a href="contact.html" title="Contact Form Page">Contact</a></li>
    <li class="about"><a href="about.html" title="About me Page">About me</a></li>
    </ul>

Jquery:

  $(document).ready(function(){

    // Get the ID of the body
    var parentID = $("body").attr("id");

    // Loop through the nav list items
        $("#nav li").each(function() {

        // compare IDs of the body and class of list-items
           var myClass = $(this).attr("class");

        // only perform the change on hover if the IDs don't match (so the active link doesn't change on hover)
        if (myClass != "n-" + parentID) {

   // Opacity effect between states 
    $('ul#nav li a').removeClass('hover');  
    $("ul#nav li a").wrapInner("<span></span>");
    $("ul#nav li a span").css({"opacity" : 0});
    $("ul#nav li a").hover(function(){
        $(this).children("span").stop().animate({"opacity" : 1}, 500);
    }, function(){
        $(this).children("span").stop().animate({"opacity" : 0}, 500);
        });
      }

     });

});

Answer 1

I'm not sure why you're checking for <li>s whose class is not 'n-parentId'. Don't you just want those whose classes are not the same as the body's ID?

Restrict the <li> selector to only exclude the class you don't want:

$(document).ready(function(){
    // Get the ID of the body
    var parentId = $("body").attr("id");

    // Loop through the nav list items
    $("#nav li[class!=" + parentId + "]").each(function(){
        // Opacity effect between states 
        $('ul#nav li a').removeClass('hover');  
        $("ul#nav li a").wrapInner("<span></span>");
        $("ul#nav li a span").css({"opacity" : 0});
        $("ul#nav li a").hover(function(){
            $(this).children("span").stop().animate({"opacity" : 1}, 500);
        }, function(){
            $(this).children("span").stop().animate({"opacity" : 0}, 500);
        });
    });
});