How to grab the ID of a selected DIV

How to grab the ID of a selected DIV

Hi - I'm trying to use the "selectable" feature - and need to find the IDs of the DIVs which have been selected.
 
When I run the code below, all I keep getting is the ID of the first DIV in the selectable DIV (ie. 2011-01-01).
 
Thank you for any help,
 
Mark
 
  1. <!
    DOCTYPE html>
  2. < html lang ="en">
  3. < head >
  4. < meta charset ="utf-8">
  5. < title > jQuery UI Selectable - Serialize </ title >
  6. < link rel ="stylesheet" href ="../../themes/base/jquery.ui.all.css">
  7. < script src ="../../jquery-1.5.1.js"></ script >
  8. < script src ="../../ui/jquery.ui.core.js"></ script >
  9. < script src ="../../ui/jquery.ui.widget.js"></ script >
  10. < script src ="../../ui/jquery.ui.mouse.js"></ script >
  11. < script src ="../../ui/jquery.ui.selectable.js"></ script >
  12. < link rel ="stylesheet" href ="../demos.css">
  13. < style >
  14. #selectable .ui-selecting
  15. {
  16. background : green ;
  17. }
  18. #selectable .ui-selected
  19. {
  20. background : red ;
  21. color : white ;
  22. }
  23. #selectable
  24. {
  25. list-style-type : none ;
  26. margin : 0 ;
  27. padding : 0 ;
  28. width : 60% ;
  29. }
  30. #selectable div
  31. {
  32. margin : 3px ;
  33. padding : 1px ;
  34. float : left ;
  35. width : 80px ;
  36. height : 30px ;
  37. font-size : 1em ;
  38. text-align : center ;
  39. }
  40. </ style >
  41. < script >
  42. $( function () {
  43. $( "#selectable" ).selectable({
  44. stop: function () {
  45. var result = $( "#result" ).empty();
  46. var result2 = $( "#result2" ).empty();
  47. $( ".ui-selected" , this ).each( function () {
  48. var index = $( "#selectable div" ).index( this );
  49. result.append( " #" + (index + 1));
  50. var txt = $( "#selectable div" ).attr( "id" );
  51. result2.append(txt);
  52. });
  53. }
  1. });
  2. });
  3.  
  4. </ script >
  5. </ head >
  6. < body >
  7. < div class ="demo">
  8. < p id ="feedback">
  9. You selected: < span id ="result"></ span >< br />
  10. You selected: < span id ="result2"></ span >
  11. </ p >
  12. < div id ="selectable" style =" border-width : thick; margin-bottom : 5px">
  13. < div id ="2011-01-01">
  14. Element 1 </ div >
  15. < div id ="2011-01-02">
  16. Element 2 </ div >
  17. < div id ="2011-01-03">
  18. Element 3 </ div >
  19. < div id ="2011-01-04">
  20. Element 4 </ div >
  21. < div id ="2011-01-05">
  22. Element 5 </ div >
  23. < div id ="2011-01-06">
  24. Element 6 </ div >
  25. </ div >
  26. </ div>
    27.  
  27. </ body >
  28. </ html >

 

    • Topic Participants

    • mark