jQueryUI -一个页面上有多个滑块

Question

我正在尝试在一个页面上有多个jQuery ui滑块。我看了一大堆例子，仍然不明白为什么我不能让它工作。这是我的代码。

HTML

  <div class='eigenvalue'>
    <div class="slidername">Eigenvector 1</div>
    <div id='s1' class="slider"></div>
    <div id='r1'  class="slider-result">0</div> 
  </div>
  <div class='eigenvalue'>
    <div class="slidername">Eigenvector 2</div>
    <div id='s1' class="slider"></div>
    <div id='r1'  class="slider-result">0</div> 
  </div>

Javascript

$(function(){
  $('.eigenvalue').each(function(){
    $( this).('#s1').empty().slider({
       animate: true,
       range: "min",
       value: 0,
       min: -5,
       max: 5,
       step: 0.1,
       slide: function( event, ui ) {
         $( this ).('#r1').html( ui.value );
       },
      change: function(event, ui) {

        //Functionality 
       }
    });
  });
});

如果有人能为我指明正确的方向，我将不胜感激。

谢谢。

Answer 1

多亏了下面的一些评论，问题被识别出来了--我需要使用.find()

以下是正确的javascript代码：

$(function(){
  $('.eigenvalue').each(function(){
    $( this).find('#s1').empty().slider({
      animate: true,
      range: "min",
      value: 0,
      min: -5,
      max: 5,
      step: 0.1, //this gets a live reading of the value and prints it on the page
      slide: function( event, ui ) {
        $( this ).find('#r1').html( ui.value );
      },
      change: function(event, ui) {
      }
    });
  });
});