[英]How can I get data from the selected element?
頁面包含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]`
});
}
});
});
如何從所選元素中獲取數據?
我想你需要li元素內的文本
console.log($(this).text());
我會這樣
$('.ui-widget-content').click(function(){
console.log($(this).text());
});
你可以這樣做:
function getDATA(){
var data;
$("#selectable li").each(function() {
data += $(this).text();
})
console.log(data);
}
您可以使用選擇的屬性
$( "#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>
為什么不只是使用
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.