Как получить данные из выбранного элемента?

Question

страница содержит HTML

<ol id="selectable"> 
    <li class="ui-widget-content word">I've</li> 
    <li class="ui-widget-content word">got</li> 
    <li class="ui-widget-content word">a</li> 
    <li class="ui-widget-content word">job</li> 
</ol> 

Я пытаюсь получить данные из элемента Li

$(function() { 
    $("#selectable").selectable({ 
     stop : function() { 
      var result = $("#select-result"); 
      $(".ui-selected", this).each(function() { 
       //getting data from an element 
       var value = $("#selectable li").data(this); 
       console.log("value"+value); //this outputs to `value[object Object]`  
      }); 
     } 
    }); 

}); 

Как я могу получить данные из выбранного элемента?

Answer 1

Вы можете сделать это:

function getDATA(){  
    var data; 
    $("#selectable li").each(function() { 
     data += $(this).text(); 
    }) 

    console.log(data); 
} 

Answer 2

Я думаю, вам нужно текст внутри элемента LI

console.log($(this).text()); 

Я бы, как этот

$('.ui-widget-content').click(function(){ 
    console.log($(this).text()); 
}); 

Answer 3

вы можете использовать атрибут выбрано

$("#selectable").selectable({ 
 
    selected: function(e, ui) { 
 
     if ($(ui.selected).hasClass("ui-state-highlight")) { 
 
      $(ui.selected).removeClass("ui-state-highlight"); 
 
     } else { 
 
      $(ui.selected).addClass("ui-state-highlight"); 
 
     } 
 
     console.log(ui.selected.innerHTML); 
 
    },  
 
    unselected: function(e, ui) { 
 
     $(ui.unselected).removeClass("ui-state-highlight");  
 
    } 
 
});

ul {margin: 0; padding: 0; list-style-type: none; width: 50%;} 
 
ul li {padding: 0.4em; margin: 0.2em; cursor: pointer; font-size: 0.8em;}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> 
 
<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<ol id="selectable"> 
 
    <li class="ui-widget-content word">I've</li> 
 
    <li class="ui-widget-content word">got</li> 
 
    <li class="ui-widget-content word">a</li> 
 
    <li class="ui-widget-content word">job</li> 
 
</ol>

Answer 4

почему бы не просто использовать

var foo = $('#selectable').find(':selected').data('id');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<ol id="selectable"> 
 
    <li data-id="I've" class="ui-widget-content word">I've</li> 
 
    <li data-id="got" class="ui-widget-content word">got</li> 
 
    <li data-id="a" class="ui-widget-content word">a</li> 
 
    <li data-id="job" class="ui-widget-content word">job</li> 
 
</ol>