Change background of specific selectable() jquery

Question

I'm trying to change the color of one specific element in a selectable function using jquery.

<ol id="selectable">
    <li class="ui-widget-content" id="s1">Option 1</li>
    <li class="ui-widget-content" id="s2">Option 2</li>
    <li class="ui-widget-content" id="s3">Option 3</li>
    <li class="ui-widget-content" id="s4">Option 4</li>
    <li class="ui-widget-content" id="s5">Option 5</li>
</ol>

I just want to change the background color where id="s4", but I dont't know if that's possible.

The function is:

$(function() {
    $("#selectable").selectable();      
});

I already tried with jquery and css but still nothing.

Answer 1

You can use create event

$(function() {
    $("#selectable").selectable({
        create: function(event, ui) {
            $("#s4").css('background', 'red');
        },
        selected: function(event, ui) {
            $(ui.selected).css('background', 'yellow');
        }
    });
});

Fiddle

Answer 2

You can just write a css hack for that

#selectable #s4.ui-selected { background: red; }

Answer 3

check this fiddle

Script :

     $(document).ready(function(){
        $(".myGrid").click(function(){
            $(".myGrid").each(function() {
                $(this).css('background-color', '');
            });
            $(this).css('background-color', 'red');
           }); 
        });

Html :

<ol id="selectable">
        <li class="ui-widget-content myGrid" id="s1">Option 1</li>
        <li class="ui-widget-content myGrid" id="s2">Option 2</li>
        <li class="ui-widget-content myGrid" id="s3">Option 3</li>
        <li class="ui-widget-content myGrid" id="s4">Option 4</li>
        <li class="ui-widget-content myGrid" id="s5">Option 5</li>
</ol>