jQuery: Why does this selector work only some of the time?

Question

I've got a list that looks like this:

<li class = "current_parent level-0">
  <a> Parent Link </a>
  <ul class= "children">
     <li class = "level-1">
           <a> Link to child </a>
     </li>

     <li class = "level-1 current_page_item">
          <a> Link to child </a>
     </li>

     <li class = "level-1">
           <a> Link to child </a>
     </li>

     </ul>
</li>

I also have some jQuery to look for the siblings of that "current page item" and get some info (The title and URL) from them. In the example above, where the "current page item" is flanked by two siblings on both sides, the code works great:

//Get URLs, run a length check against them. Execute functions are necessary. Pass the functions the relevant URL
        var nextURL= $(".current_page_item").next().find("a").attr("href"); //Get the HREF of the next page in list
        var previousURL= $(".current_page_item").prev().find("a").attr("href"); //Get the HREF of the previous page in list


        if(previousURL.length >= 1){    
            alert ("Setting prev URL!");
            setPrevPageLink(previousURL);
        }
        else if(previousURL == undefined){
            alert ("Hiding prev URL!");
            $('.previous_link').hide();
        }


        if (nextURL.length >= 1){
            alert ("Setting next URL!");
            setNextPageLink(nextURL);
        }
        else if(nextURL == undefined){
            alert ("Hiding Next URL!");
            $('.next_link > a').hide();
        }

       function setPrevPageLink(previousURL) {

           var prevTitle = $(".current_page_item").prev().find("a").attr("title"); //Get the title of previous page in list. WP provides.
           $(".previous_link > a").attr("href", previousURL); //Set the 'Previous Link' to the URL of the previous item in list.
           $(".previous_link > a").text(prevTitle); // Set the Title Text of the Link to the title of the previous Item in the List
           alert ("Previous URL is" + previousURL + "and it's title is " + prevTitle + "and it's length is " + previousURL.length); //Drop an alert for Debug
       }

       function setNextPageLink(nextURL){

            var nextTitle = $(".current_page_item").next().find("a").attr("title");
            $(".next_link > a").attr("href", nextURL);
            $(".next_link > a").text(nextTitle);
            alert ("Next URL is" + nextURL + "and the title is" + nextTitle + "and it's length is" + nextURL.length);
       }

However, if the "current page item" is at the START of a list (i.e., it has no "higher" sibling, just a "lower" one), this code never executes. Why? Nothing happens in it. If the "current page item" is at the END of a list, everything goes fine.

Also, Bonus Q: The "== undefined" never works. Why? What's the isset equivalent in Javascript?

Answer 1

It's because previousURL will be undefined if there's no link to get the href from, so you need to check for undefined before checking the .length of the property, like this:

    if(previousURL === undefined){  
        alert ("Hiding prev URL!");
        $('.previous_link').hide();
    }
    else if(previousURL.length >= 1){  
        alert ("Setting prev URL!");
        setPrevPageLink(previousURL);
    }

Make sure to do the same for the nextURL. I think your confusion comes from a bad test, it does blow up if it's at the end of the list as well, you can test it here.

Here's an updated/working version for all scenarios.

Answer 2

Answering the bonus question:

To check if a member is undefined:

typeof x === "undefined"