Изоляция jQuery только от содержащихся элементов

Question

Я долго искал, и я слишком новичок в JQuery и javascript, чтобы понять, где я ошибаюсь. Любая помощь будет оценена. У меня есть скрипт ниже, который отлично работает для одного элемента. Как я могу изменить это для работы с несколькими элементами? Если у меня есть несколько элементов на странице, ползунок будет прокручивать все, а не только элементы в одном контейнере. Я знаю, что технически мог бы просто создавать новые переменные и новые имена классов для каждого метода, но это грязно, и я знаю, что должен быть разумный путь.

<script type="text/javascript" charset="utf-8">
    window.onload = function () {
        var container = $('div.sliderGallery');
        var ul = $('ul', container);

        var itemsWidth = ul.innerWidth() - container.outerWidth();

        $('.slider', container).slider({
            min: 0,
            max: itemsWidth,
            handle: '.handle',
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });  
    };
</script>

А вот и HTML.

<div class="sliderGallery">

  <ul id="audio-downloads">
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
  </ul>

  <div class="slider">
    <div class="handle"></div>
  </div>

</div>

<div class="sliderGallery">

  <ul id="audio-downloads">
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
    <li><a href="#">Audio Title</a></li>
  </ul>

  <div class="slider">
    <div class="handle"></div>
  </div>

</div>

Answer 1

Обновление Также только что заметил, что вы используете window.onload. В jQuery вы должны использовать $(document).ready() или его псевдоним $(function()).

Вам просто нужно использовать each() для запуска коллекции sliderGallery элементов:

$(function(){ // This replaces your window.onload function wrapper
   $('div.sliderGallery').each(function(){
      var ul = $('ul', this);

      var itemsWidth = ul.innerWidth() - $(this).outerWidth();

      $('.slider', this).slider({
          min: 0,
          max: itemsWidth,
          handle: '.handle',
          stop: function (event, ui) {
              ul.animate({'left' : ui.value * -1}, 500);
          },
          slide: function (event, ui) {
              ul.css('left', ui.value * -1);
          }
      }); 
   });
})

В функции обратного вызова each, this = текущий узел DOM. Если вам нужно это как объект jQuery в этом контексте, используйте $(this).

Answer 2

Попробуйте что-то вроде этого - это преобразует ваш код в плагин, который можно выборочно применять в скрипте загрузки:

<script type="text/javascript" charset="utf-8">
    // This replaces window.load:
    $(function() {
        // Matches each slider gallery and applies one plugin to each.
        $('.sliderGallery').sliderGallery();
    });

    // Your very own jQuery plugin
    $.fn.sliderGallery = function() {
        var container = $(this); // $(this) is the element you applied the plugin to.
        var ul = $('ul', container);

        var itemsWidth = ul.innerWidth() - container.outerWidth();

        $('.slider', container).slider({
            min: 0,
            max: itemsWidth,
            handle: '.handle',
            stop: function (event, ui) {
                ul.animate({'left' : ui.value * -1}, 500);
            },
            slide: function (event, ui) {
                ul.css('left', ui.value * -1);
            }
        });  
    };
</script>

Надеюсь, это поможет.