jQuery - nth child and slider problem?
<p>There is a generic image slider (nivo image slider) used on the charity pages that contains 7 slides, each slide is a different charity. I have used some jQuery so that when you are on a charities detail page, that specific charities slide shows up first in the slider queue; instead of it just looping from the start of the slider queue and showing a non-relevant charity. Basically looks at the URL and matches to the href in the slider link and adds a class then moves to the top of the link etc...</p>

<p>For example, these 2 work fine...</p>

<p><a href="http://test.clothesaid.co.uk/partner-charities/yorkshire-cancer-centre/" rel="nofollow">http://test.clothesaid.co.uk/partner-charities/yorkshire-cancer-centre/</a></p>

<p><a href="http://test.clothesaid.co.uk/partner-charities/nspcc/" rel="nofollow">http://test.clothesaid.co.uk/partner-charities/nspcc/</a></p>

<p>...they load their respective charities slider. However...</p>

<p><a href="http://test.clothesaid.co.uk/partner-charities/papworth-hospital-charity/" rel="nofollow">http://test.clothesaid.co.uk/partner-charities/papworth-hospital-charity/</a></p>

<p>...which is the oldest entry and at the bottom of the list won't load it's respective slider and just shows the slider list in it's normal order as the jQuery has not kicked in.</p>

<p>The charities are added in date order with the newest charity at the top of the list and the oldest charity at the bottom of the list. The jQuery works fine on all charities apart from whatever charity is at the bottom of the list, it just won't kick in. I'm sure it's something to do with the 'clone' slide that the Nivo slider uses and something to do with the :nth child in jQuery but I just can't work it out. That's the only thing that would make sense as the date order of the charities is the only thing that is changing. You can see the stack of charity logos on the right hand side of the page, that is the date order, with the oldest at the bottom. It's always the oldest one (at the bottom of the list) that won't work.</p>

<p>I'm basically stuck!</p>

<p>HTML</p>

<pre><code>&lt;ul id="slider1"&gt;
 &lt;li class="panel cloned"&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
 &lt;li class="panel hello"&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
 &lt;li class="panel"&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
 &lt;li class="panel"&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
 &lt;li class="panel"&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
 &lt;li class="panel cloned"&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>jQuery </p>

<pre><code>var url = window.location.toString();

$('#slider1 li.panel a').each(function(){
   var myHref= $(this).attr('href');
   if( url == myHref) {
        $(this).closest("li").addClass('hello').insertAfter("#slider1 li:nth-child(1)");
        return false;
   }
});
</code></pre>
