Question

慈善页面上使用了一个通用图像滑块（nivo图像滑块），其中包含7张幻灯片，每张幻灯片都是不同的慈善机构。我使用了一些jQuery，这样当你在慈善机构的详细信息页面上时，特定的慈善机构幻灯片首先显示在滑块队列中;而不是它只是从滑块队列的开头循环并显示一个不相关的慈善机构。基本上查看URL并匹配滑块链接中的href并添加一个类然后移动到链接的顶部等...

例如，这两个工作正常......

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

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

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

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

...这是最旧的条目，在列表的底部不会加载它的相应滑块，只是按照正常的顺序显示滑块列表，因为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-hospital-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;
   }
  });
};

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

2 个答案: