Изменить фон определенного выбираемого() jquery

Question

Я пытаюсь изменить цвет одного конкретного элемента в функции выбора с помощью 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> 

Я просто хочу, чтобы изменить цвет фона, где ID = «s4», но я dont't знаю, если это возможно.

Функция:

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

Я уже пробовал с JQuery и CSS, но до сих пор ничего.

Answer 1

Вы можете использовать create событие

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

Fiddle

Answer 2

проверить это fiddle

Сценарий:

 $(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> 

Answer 3

Вы можете просто написать хак для этого

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