Ignoring empty href in jQuery each
<p>I'm trying to ignore a's with empty href attributes in a jQuery function. Here's the Menu:</p>

<pre><code>&lt;nav id="nav-works-screen" role="navigation"&gt;
    &lt;ul id="nav-other-links"&gt;
        &lt;li class="nav-title"&gt;NICHOLAS&lt;br/&gt; AREHART&lt;/li&gt;&lt;br/&gt;
        &lt;li&gt;&lt;a href=""&gt;CV/Bio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=""&gt;News&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="&lt;?php randLink() ?&gt;"&gt;Link???&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul id="nav-works"&gt;
        &lt;li class="nav-title"&gt;WORK&lt;/li&gt;&lt;br/&gt;
        &lt;li class="work"&gt;&lt;a href="#the-speech"&gt;The Speech&lt;/a&gt;&lt;/li&gt;
        &lt;li class="work"&gt;&lt;a href="#forms-derived-from-a-code"&gt;Forms Derived from a Code&lt;/a&gt;&lt;/li&gt;
        &lt;li class="work"&gt;&lt;a href="#unauthorized-reproduction"&gt;Unauthorized Reproduction&lt;/a&gt;&lt;/li&gt;
        &lt;li class="work"&gt;&lt;a href=""&gt;Newport Ads&lt;/a&gt;&lt;/li&gt;
        &lt;li class="work"&gt;&lt;a href=""&gt;An Illegally Downloaded Film&lt;/a&gt;&lt;/li&gt;
        &lt;li class="work"&gt;&lt;a href=""&gt;Hold on to Your Genre&lt;/a&gt;&lt;/li&gt;
        &lt;li class="work"&gt;&lt;a href=""&gt;Autonomy&lt;/a&gt;&lt;/li&gt;
        &lt;li class="work"&gt;&lt;a href=""&gt;Ikea Objects&lt;/a&gt;&lt;/li&gt;&lt;br/&gt;
        &lt;li id="nav-arrows"&gt; 
            &lt;div class="nav-arrows"&gt;
                &lt;a class="nav-arrow-prev" href=""&gt;&amp;laquo;&lt;/a&gt;
            &amp;emsp;&amp;emsp;
                &lt;a class="nav-arrow-next" href=""&gt;&amp;#187;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
&lt;/nav&gt;
</code></pre>

<p>The anchors:</p>

<pre><code>&lt;div id="content" class="clrfx"&gt;

    &lt;div id="primary" class="clrfx"&gt;
        &lt;div id="the-speech" class="page odd the-speech"&gt;
            &lt;div class="page-content"&gt;
                &lt;h2&gt;The Speech&lt;/h2&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div id="forms-derived-from-a-code" class="page even forms-derived-from-a-code"&gt;
            &lt;div class="page-content"&gt;
                &lt;h2&gt;Forms Derived from a Code&lt;/h2&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;div id="unauthorized-reproduction" class="page odd unauthorized-reproduction"&gt;
            &lt;div class="page-content"&gt;
                &lt;h2&gt;Unauthorized Reproduction&lt;/h2&gt;
            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/div&gt;&lt;!-- #primary --&gt;

&lt;/div&gt;&lt;!-- #content --&gt;
</code></pre>

<p>And here is the jQuery:</p>

<pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready( function() {
        $('#nav-works-screen a').smoothScroll();

        $(document).scroll( function(){
            $('nav a').each( function(){
                var workLink = $(this);
                var work = workLink.attr('href');

                if (work != '') {

                    var workTop = $(work).offset().top;
                    var currentPos = $(window).scrollTop();
                    var winHeight = $(window).height();

                    if (currentPos &gt;= workTop) {
                        workLink.css({'background-color':'#38FF4F'});
                        workLink.parent().siblings().children().css({'background-color':'transparent'});
                    }
                    else {
                        workLink.css({'background-color':'transparent'});
                    }
                }
            });
        });
    });
&lt;/script&gt;
</code></pre>

<p>Unfortunately, I keep getting an error that property 'top' of null cannot be read. I don't understand why the work variable would be empty if I've explicitly stated that any empty work variables should be ignored. I'm sure its something really simple but I've been banging my head against a wall with this thing for over an hour now. Any help would be much appreciated.</p>

<p>Edit - This is the problem: <code>&lt;li&gt;&lt;a href="&lt;?php randLink() ?&gt;"&gt;Link???&lt;/a&gt;&lt;/li&gt;</code> I guess my random link php function is screwing with jQuery traversing the DOM but I'm curious as to why.</p>
