Conditional statement not responding to results
<p>On my page there may be any number of UL's populated, with a maximum of 3 LI's in each. I have set this conditional statement up to handle the left margin, depending on how many LI's there may be. It logs the correct result, but it always applies the css as if the result was 1, even if the result is 2 or 3... I'm quite new to this so maybe I'm missing something obvious to a more experienced person. 
Each LI has a width and height of 40px and a background image. Text is indented so it doesn't show.</p>

<pre><code>$("ul.links").each(function(){    
    var num = $(this).children().length;
    if (num == 1) {
        $('ul.links li:first-child').css('margin-left','125px');
    }
    else if (num == 2) {
        $('ul.links li:first-child').css('margin-left','96px');
    }
    else {
        $('ul.links li:first-child').css('margin-left','71px');
    }
    //console.log(num);
});

&lt;ul class="links"&gt;
  &lt;li&gt;&lt;a href="#"&gt;First&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Second&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Third&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
