javascript conditional statement using &&

I am attempting to change the state of a button if all of three specific elements have a specific class applied.

Previously I was simply counting the number of li's with the class "complete" 开发者_运维知识库but now I need to be more specific.

$("#signUp li").click(function(){
    $(this).addClass("complete");
    //    if($("#signUp li.complete").length >= 3){

        if(  $ ( "#signUp li:first-child" && "#signUp li:nth-child(5)" && "#signUp li:nth-child(7)" ).hasClass( "complete" ) )
        {
        $("#done").addClass("active");
        };
    });

I've tried this and some variations thereof but the best result has been to meet the criteria when the last li's class is set to "complete"

I've been poking around a bit but couldn't find a specific instance that matches my situation.

Always thanks for awesome responses that educate and correct my amateur ways.

Your Jquery selector is invalid, what you actually need to do is this:

$("#signUp li").click(function(){
    $(this).addClass("complete");

    if(
        $("#signUp li:first-child").hasClass("complete") &&
        $("#signUp li:nth-child(5)").hasClass("complete") &&
        $("#signUp li:nth-child(7)").hasClass("complete"))
    {
        $("#done").addClass("active");
    }
});

Your current code runs only when the last selector has the class because the strings are being evaluated as a boolean operation. This means that the following is performed:

"#signUp li:first-child" && "#signUp li:nth-child(5)" && "#signUp li:nth-child(7)"

When this evaluates true (which it always does, because non-empty strings are "truthy"), it simply returns the last evaluated value, which would be "#signUp li:nth-child(7)", so your whole statement was getting compiled into:

if($("#signUp li:nth-child(7)").hasClass("complete")) {
        $("#done").addClass("active");
    };
});

How about simply stating it like this:

        if( $("#signUp li:first-child").hasClass("complete")
              && $("#signUp li:nth-child(5)").hasClass("complete")
              && $("#signUp li:nth-child(7)").hasClass("complete") ){
          ... code
        }

this:

if(  $ ( "#signUp li:first-child" && "#signUp li:nth-child(5)" && "#signUp li:nth-child(7)" ).hasClass( "complete" ) )

should be this (improved):

if(  $ ( "#signUp").find("li:first-child:not(.complete), li:nth-child(5):not(.complete), li:nth-child(7):not(.complete)" ).length == 3 )

"#signUp li:first-child" && "#signUp li:nth-child(5)" && "#signUp li:nth-child(7)"

evaluates to true, as && is a logic operator. so you are really doing $(true).hasClass(...)

Use the not selector to find out if any are not complete.

http://jsfiddle.net/

if ($("li:not(.complete)").length == 0) {}

Pretty sure that isn't right, you're doing an && operation on strings which won't give the results you expect. The following however, will work.

$ ( "#signUp li:first-child" ).hasClass("complete") 
    && $( "#signup li:nth-child(5)" ).hasClass("complete") 
    && $("#signup li:nth-child(7)" ).hasClass( "complete" )