jQuery: прокрутка динамически сгенерированных элементов списка

Я пытаюсь включить скрипт прокрутки Valums (http://valums.com/scroll-menu-jquery/) в динамически создаваемую разбивку на страницы плагина Cycle, http://www.malsup.com/jquery/cycle/pager2.html. В основном я пытаюсь получить динамическую разбивку на страницы (1, 2, 3...) для прокрутки при движении мыши.

Итак, у меня есть оригинальный демо-код Cycle:

$('#slideshow').before('').cycle({ fx: 'turnDown', скорость: 'быстро', время ожидания: 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>'; 
}

});

И затем я пытаюсь применить:

$(function(){ //Получить наши элементы для более быстрого доступа и установить ширину наложения 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 можно было прокручивать при движении мыши?


scroll pagination jquery cycle
person Darik    schedule 17.01.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я не пробовал ваш код, но 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>

Попробуйте воссоздать этот список динамически.

P.S. У вас отсутствует атрибут «alt» в ваших изображениях.

person Rumplin    schedule 17.01.2011
comment
В вашем примере ‹div› ‹span›one‹/span› ‹span›two‹/span› ‹span›three‹/span› ‹span›four‹/span› ‹/div› не генерируется динамически с помощью jQuery. Моя проблема в том, что var lastLi = ul.find('li:last-child'); на самом деле не видит динамически генерируемую нумерацию страниц в плагине цикла. - person Darik; 17.01.2011

arrow_upward
0
arrow_downward

Итак, мне пришлось использовать .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);
    });
person Darik    schedule 17.01.2011