jQuery .each being applied to broadly
<p>I have a small script which makes an <code>li</code> element click-able and sets the location to that of a link inside of the <code>li</code>. This runs without error and my two <code>console.log()</code> calls are reporting back what I would expect, however, when you click on the <code>li</code> (whichever <code>li</code>) you are taken the <code>href</code> of the link in the last <code>li</code>. This doesn't make much sense to me as I thought I had properly handled the scope. </p>

<p>Please correct my understanding and let me know where I went wrong. </p>

<p>JavaScript: </p>

<pre><code>$(".homeCTA li").each(function(){
    $href = $(this).find("a").attr("href");
    console.log($(this)); // displays the expected selector
    console.log($href); // displays the correct href
    $(this).click(function(){ window.location = $href }); // this is overriding all of the previous passes
}); 
</code></pre>

<p>HTML:</p>

<pre><code>&lt;ul class="homeCTA"&gt;
    &lt;li class="left"&gt; 
        &lt;img src="first-source.jpg"&gt;
        &lt;h2&gt;&lt;a href="SearchResults.asp?Cat=1833"&gt;Yada Yada Yada&lt;/a&gt;&lt;/h2&gt;
    &lt;/li&gt;
    &lt;li class="right"&gt;
        &lt;img src="second-source.jpg"&gt;
        &lt;h2&gt;&lt;a href="SearchResults.asp?Cat=1832"&gt;Try the bisque&lt;/a&gt;&lt;/h2&gt;
    &lt;/li&gt;
&lt;/ul&gt;
</code></pre>
