Review on my multiple JQuery Slider on a page

I have successfully placed multiple jquery ui slider on a page and its transalation text too. you can check it live on: http://outsourcingnepal.com/projects/jQuery%20slider/

I have my jquery code as :

var arrLabel1 = new Array('Not Good', 'OK', 'Average', 'Above Average', 'Excellent', 'Outstanding');
$(function() {
    $( ".slider_control" ).slider({
        value:0,
        min: 0,
        max: 5,
        step: 1,
        slide: function( event, ui ) {
            $( "#slider_" + $(this).attr('rel') ).val( ui.value );
            $( "#label_" + $(this).attr('rel') ).text( arrLabel1[ ui.value ] );
        }
    }).each(function(index){
        $( "#slider_" + (index + 1) ).val( $( this ).slider( "v开发者_如何学编程alue" ) );
        $( "#label_" + (index + 1) ).text( arrLabel1[ $(this).slider( "value" ) ] );
    });
});

Now i would like to optimize it so that i can be independent of rel attribute.

MY HTML:

<ul class="slider-container"> 
    <li class="ui_slider"> 
        <div class="title">Overall: <span id="label_1"></span></div> 
        <input type="hidden" name="overall_review" id="slider_1" /> 
        <div class="slider_control" rel="1"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Cleanliness: <span id="label_2"></span></div> 
        <input type="hidden" name="overall_review" id="slider_2" /> 
        <div class="slider_control" rel="2"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Facilities: <span id="label_3"></span></div> 
        <input type="hidden" name="overall_review" id="slider_3" /> 
        <div class="slider_control" rel="3"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Location: <span id="label_4"></span></div> 
        <input type="hidden" name="overall_review" id="slider_4" /> 
        <div class="slider_control" rel="4"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Quality of Service: <span id="label_5"></span></div> 
        <input type="hidden" name="overall_review" id="slider_5" /> 
        <div class="slider_control" rel="5"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Room: <span id="label_6"></span></div> 
        <input type="hidden" name="overall_review" id="slider_6" /> 
        <div class="slider_control" rel="6"></div> 
    </li> 
    <li class="ui_slider"> 
        <div class="title">Value of Money: <span id="label_7"></span></div> 
        <input type="hidden" name="overall_review" id="slider_7" /> 
        <div class="slider_control" rel="7"></div> 
    </li> 
</ul> 

You can use traversing methods of jQuery

var arrLabel1 = new Array('Not Good', 'OK', 'Average', 'Above Average', 'Excellent', 'Outstanding');
$(function() {
    $( ".slider_control" ).slider({
        value:0,
        min: 0,
        max: 5,
        step: 1,
        slide: function( event, ui ) {
            $(this).siblings('input:hidden').val( ui.value );
            $(this).siblings('.title').children('span').text( arrLabel1[ ui.value ] );
        }
    }).each(function(index){
        $(this).siblings('input:hidden').val( $( this ).slider( "value" ) );
        $(this).siblings('.title').children('span').text( arrLabel1[ $(this).slider( "value" ) ] );
    });
});

You could bind each input to their slider respectively once then only use the reference when you need it like

$(function() {
    $( ".slider_control" ).each(function(index) {
        var $input = ( this._input = $(this).siblings('input:hidden') ); // same for the title
        $input.val( $(this).slider( "value" ) );
        $input.text( arrLabel1[ $(this).slider( "value" ) ] );
    })
    .slider({
        value:0,
        min: 0,
        max: 5,
        step: 1,
        slide: function( event, ui ) {
            this._input.val( ui.value ); //same for the title
            this._input.text( arrLabel1[ ui.value ] );
        }
});