I've got two (or more) ordered list from the jQuery-type "selectable" with multiple items, like this:
<ol id="selectable" class="0">
<li class="ui-widget-content">
<div>
<img src="..."></br>
<span>Item 1 - Row 1</span>
</div>
</li>
<li class="ui-widget-content">
<div>
<img src="..."></br>
<span>Item 2 - Row 1</span>
</div>
</li>
</ol>
<ol id="selectable" class="1">
<li class="ui-widget-content">
<div>
<img src="..."></br>
<span>Item 1 - Row 2</span>
</div>
</li>
...
</ol>
Now if got two function to query the index of the selected "selectable"
$( "#selectable.0" ).selectable({
filter: "li",
selecting: function (event, ui) {
$(event.target).children('.ui-selecting').not(':first').removeClass('ui-selecting');
row = event.target.className[0]},
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
index = $( "#selectable.0 li" ).index( this );
values[row] = String(index)
});
}
});
$( "#selectable.1" ).selectable({
filter: "li",
selecting: function (event, ui) {
$(event.target).children('.ui-selecting').not(':first').removeClass('ui-selecting');
row = event.target.className[0]},
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
index = $( "#selectable.1 li" ).index( this );
values[row] = String(index)
});
}
});
This code is very redundant, and I want to merge this two function into one, which can decide which list selected and also gives me back the index of the selected item. Important is also that I don't want the index of all items