JQuery получение значений слайдера внутри петли .each

Question

У меня есть 3 слайдера (они динамические, поэтому мне нужно их прокрутить).

У меня есть jsFiddle здесь: http://jsfiddle.net/mtait/R5czJ/

HTML является:

<label for="slider1">item 1</label> 
<input type="range" class="mtslide" name="slider1" id="slider1" min="0" max="10" value="0"> 
<label for="slider2">item 2</label> 
<input type="range" class="mtslide" name="slider2" id="slider2" min="0" max="10" value="0"> 
<label for="slider3">item 3</label> 
<input type="range" class="mtslide" name="slider3" id="slider3" min="0" max="10" value="0"> 

Я пытаюсь перебрать их, и создать JSON строку:

function slide() { 

    var ExtraPrices = [20.00,30.00,50.00]; 
    var ExtraIDs = [1,2,3]; 

    var count = 0; 
    var arr = []; 

    $('.mtslide').each(function() { 
    var obj = { 
     id: ExtraIDs[count], 
     price: ExtraPrices[count], 
     number: $(this).slider("option", "value") 
    }; 
    arr.push(obj); 
    count += 1; 
    }); 

    alert(JSON.stringify(arr)); 

} 

Однако «номер "или значение ползунков, всегда равно нулю:

Как получить правильное значение для каждого ползунка, в моем петле .each выше?

спасибо,

Марк

Answer 1

JQuery в каждой функции на самом деле дает вам две переменных: индекс и Element http://api.jquery.com/each/

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

$('.mtslide').each(function (index, Element) { 
    var obj = { 
     id: ExtraIDs[index], 
     price: ExtraPrices[index], 
     number: $(Element).val() 
    }; 
    arr.push(obj); 
}); 

Сохранение отдельного массива по цене и идентификатору может быть подвержено ошибкам. Вы должны рассмотреть возможность указания дополнительных значений в элементе html с атрибутом данных. http://html5doctor.com/html5-custom-data-attributes/ http://api.jquery.com/data/ Что-то вроде этого:

<input type="range" class="mtslide" name="slider1" id="slider1" min="0" max="10" value="0" data-price="20.00" data-id="1"> 
<input type="range" class="mtslide" name="slider2" id="slider2" min="0" max="10" value="0" data-price="30.00" data-id="2"> 
<input type="range" class="mtslide" name="slider3" id="slider3" min="0" max="10" value="0" data-price="50.00" data-id="3"> 

Тогда вы можете назвать их более конкретно к элементу:

$('.mtslide').each(function (index, Element) { 
    var obj = { 
     id: $(Element).data("price"), 
     price: $(Element).data("price"), 
     number: $(Element).val() 
    }; 
    arr.push(obj); 
}); 

Полная скрипку: http://jsfiddle.net/Wwwtv/2/