Выбираемый - получить внутренние выбранные элементы

Question

Я пытаюсь получить выбранный элемент, когда выбор используется для элемента. Вот HTML код:

<div id="yearCal" class="ui-selectable"> 
    <div id="month_1" class="month"> 
     <div class="monthTitle">January</div> 
     <div class="monthDays" id="month_1_days"> 
      <div class="monthDay ui-selectee" id="1-1">1</div> 
      <div class="monthDay ui-selectee" id="1-2">2</div> 
      ... 
     </div> 
     ... 
    </div> 
</div> 

И это код JQuery:

$("#yearCal").selectable({ filter: "div.monthDay" }); 
$("#yearCal").on("selectableselecting", function(event, ui) { 
    console.log($("div#yearCal.monthDay ui-selectee ui-selected")); 
}); 

Как я могу получить выбранные элементы, если я выбрать элементы yearCal? Что мне нужно, так это сделать, если я выберу 1 января, а затем выберу 1 февраля, я хочу, чтобы все дни/элементы div между этими двумя днями были выбраны. Поэтому я хочу идентификаторы выбранных элементов. Как получить выбранные элементы?

Answer 1

Вы можете получить выбранные внутренние предметы, используя ui.selecting.id внутри функции selectableselecting и selectableunselecting.

Docs: http://api.jqueryui.com/selectable/#event-selecting и http://api.jqueryui.com/selectable/#event-unselecting

В этом фрагменте я вход выбранного элемента и установки определенного класса, но вы можете сделать все вещи:

$("#yearCal").on("selectableselecting", function (event, ui) { 
    console.log(ui.selecting.id); 
    $('#' + ui.selecting.id).addClass('boxed'); 
}); 

$("#yearCal").on("selectableunselecting", function (event, ui) { 
    console.log(ui.unselecting.id); 
    $('#' + ui.unselecting.id).removeClass('boxed'); 
}); 

Вот рабочей скрипку: http://jsfiddle.net/IrvinDominin/shTpK/