jQuery：滚动动态生成的列表项答案

【问题标题】：jQuery: Scrolling Dynamically Generated List ItemsjQuery：滚动动态生成的列表项
【发布时间】：2011-06-10 06:39:18
【问题描述】：

我正在尝试将 Valums 的滚动脚本 (http://valums.com/scroll-menu-jquery/) 合并到 Cycle 插件 http://www.malsup.com/jquery/cycle/pager2.html 的动态创建分页中。基本上，我试图让动态分页（1、2、3...）在 mousemove 上滚动。

所以，我有原始的 Cycle 演示代码：

$('#slideshow').before('').cycle({ fx: '调低', 速度：'快'，超时：0，寻呼机：'#nav'，

// callback fn that creates a thumbnail to use as pager anchor 
pagerAnchorBuilder: function(idx, slide) { 
    return '<li><a href="#"><img src="' + slide.src + '" width="50" height="50" /></a></li>'; 
}

});

然后我正在尝试申请：

$(函数(){ //获取我们的元素以便更快地访问并设置覆盖宽度 var div = $('div#nav'), ul = $('ul#nav'), // 无序列表的左边距 ulPadding = 15;

//Get menu width
var divWidth = div.width();

//Remove scrollbars
div.css({overflow: 'hidden'});

//Find last image container
var lastLi = ul.find('li:last-child');

//When user move mouse over menu
div.mousemove(function(e){

  //As images are loaded ul width increases,
  //so we recalculate it each time
  var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

  var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
  div.scrollLeft(left);
});

});

问题是：

var lastLi = ul.find('li:last-child');

找不到最后一个元素，因为所有元素都是动态创建的。有什么想法可以限制脚本以使#nav 中的元素可以在鼠标移动时滚动？

【问题讨论】：

标签： jquery pagination scroll cycle

【解决方案1】：

我没有尝试你的代码，但无论如何 jQuery 都应该找到你动态创建的元素。

<div>
    <span>one</span>
    <span>two</span>
    <span>three</span>
    <span>four</span>
  </div>

<script>
    $("div span:last-child")
        .css({color:"red", fontSize:"80%"})
        .hover(function () {
              $(this).addClass("someclass");
            }, function () {
              $(this).removeClass("someclass");
            });

</script>

尝试动态重新创建此列表。

附：您的图片中缺少“alt”属性。

【讨论】：

在你的例子中
one two three four
不是通过 jQuery 动态生成的。我的问题是 var lastLi = ul.find('li:last-child');在循环插件中实际上并没有看到动态生成的分页。

【解决方案2】：

好的，所以我不得不使用.live()，如下所示：

div.live('mousemove', function(e) {
        var lastLi = ul.find('li:last-child');
        var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
        var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
        div.scrollLeft(left);
    });

【讨论】：