Can't get index from jQuery UI slider range
I have a while trying to get (what I thought) a simple index from a collection of multiple sliders. The HTML looks like this:
<div id="left-values" class="line">
<span id="l1" style="padding: 0 1.8em;">0</span>
<span id="l2" style="padding: 0 1.8em;">0</span>
<span id="l3" style="padding: 0 1.8em;">0</span>
<span id="l4" style="padding: 0 1.8em;">0</span>
<span id="l5" style="padding: 0 1.8em;">0</span>
<span id="l6" style="padding: 0 1.8em;">0</span>
<span id="l7" style="padding: 0 1.8em;">0</span>
<span id="l8" style="padding: 0 1.8em;">0</span>
</div>
And the jQuery code:
// setup audiometry sliders
$("#eq > span").each(function (e) {
// read initial values from markup and remove that
var value = parseInt($(this).text());
// var index = $(this).index; <- this didn't work.
$(this).empty();
$(this).slider({
value: value,
slide: function (event, ui) {
//console.log($(this).attr('id')); <- neither did this.
//console.log(index);
$('#left-values span:first').text(ui.value);
}
})
});
The problem is that the jQuery UI replaces the existing HTML with its own markup when creating the slider. This includes any ID values and, for whatever reason, I cannot get the index for a given slider to the surface. So I'm running out of ideas.
+2
a source to share
2 answers
You have work to do, maybe you have something else. Here's a separate sample, see console for output: http://jsfiddle.net/FBh3a/1/
$("#eq > span").each(function (e) {
var value = parseInt($(this).text());
$(this).empty();
$(this).slider({
value: value,
min: -10,
max: 10,
slide: function (event, ui) {
console.log($(this).attr('id')); //<- works here, outputs l1, l2, etc
console.log($(this).index()); //outputs 0, 1 .... 7 (0-based index)
}
});
});
+1
a source to share