jQuery -第n个子对象和滑块问题？

Question

有一个通用的图像滑块(nivo图像滑块)用于慈善页面，其中包含7张幻灯片，每张幻灯片是一个不同的慈善机构。我使用了一些jQuery，这样当您在慈善机构详细信息页面上时，特定的慈善机构幻灯片会首先显示在滑块队列中；而不是从滑块队列的开始循环显示一个不相关的慈善机构。主要是查看URL并与滑块链接中的href匹配，然后添加一个类，然后移动到链接的顶部，等等。

例如，这两个可以很好地工作。

http://test.clothesaid.co.uk/partner-charities/yorkshire-cancer-centre/

http://test.clothesaid.co.uk/partner-charities/nspcc/

...they加载他们各自的慈善机构滑块。然而..。

http://test.clothesaid.co.uk/partner-charities/papworth-hospital-charity/

...which是最老的条目，在列表的底部不会加载它各自的滑块，而只是以正常的顺序显示滑块列表，因为jQuery还没有生效。

慈善机构是按日期顺序添加的，最新的慈善机构在名单的顶部，最古老的慈善机构在名单的底部。除了列表底部的慈善机构之外，jQuery在所有慈善机构上都工作得很好，只是它不起作用。我确定这与Nivo滑块使用的“克隆”幻灯片有关，也与jQuery中的第n个孩子有关，但我就是做不出来。这是唯一有意义的事情，因为慈善机构的日期顺序是唯一正在改变的事情。你可以在页面的右侧看到一堆慈善机构的标志，这是日期顺序，最旧的在底部。它总是最老的那个(在列表的底部)不起作用。

我基本上被卡住了！

HTML

<ul id="slider1">
 <li class="panel cloned"><a href="#">Example</a></li>
 <li class="panel hello"><a href="#">Example</a></li>
 <li class="panel"><a href="#">Example</a></li>
 <li class="panel"><a href="#">Example</a></li>
 <li class="panel"><a href="#">Example</a></li>
 <li class="panel cloned"><a href="#">Example</a></li>
</ul>

jQuery

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;
   }
});

Answer 1

现在发生的情况是，“papworth- himself charity”是li列表中的第一个，insertAfter会尝试将它插入到他自己之后，但这是不起作用的

我建议您在移动li之前检查它的索引(您正在将目标li移动到第二个位置，对吗？)

var url = window.location.toString();

$('#slider1 li.panel a').each(function(index){
   var myHref= $(this).attr('href');
   if( url == myHref) {
        $(this).closest("li").addClass('hello')
        if(index==0){
            $(this).closest("li").insertAfter("#slider1 li:nth-child(2)");
        }else{
            $(this).closest("li").insertAfter("#slider1 li:nth-child(1)");
        }
        return false;
   }
});

或者使用anythingSlider功能按索引显示幻灯片：

var url = window.location.toString();

$('#slider1 li.panel a').each(function(index){
   var myHref= $(this).attr('href');
   if( url == myHref) {
        $('#slider1').anythingSlider(index);
        return false;
   }
});

Answer 2

$(document).ready(function() {
  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;
   }
  });
};