如何获取可选jquery元素的innerHTML?

时间:2013-09-13 12:13:35

标签: javascript jquery html innerhtml selectable

我有一个php生成的列表,其列表项可以使用jquery selectable小部件进行选择。所有意图和目的的列表是:

<ul id="#select-image">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
</ul>

jQuery selectable声明为:

<script>
    $(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').innerHTML; 
                console.log($variable);
            }
        });
    });
</script>

在选择列表项后发生事件,在示例中它将输出到浏览器控制台。然而输出是“未定义的”。选择器$('.ui-selected').是正确的,因为它在浏览器的控制台中显示为对象。我哪里错了?

4 个答案:

答案 0 :(得分:51)

尝试

.text().html()代替.innerHTML

答案 1 :(得分:3)

使用.val()代替.innerHTML获取所选选项的值

使用.text()获取所选选项的文字

感谢您纠正:)

答案 2 :(得分:3)

$(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').html(); 
                console.log($variable);
            }
        });
    });

$(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').text(); 
                console.log($variable);
            }
        });
    });

$(function() {
        $("#select-image").selectable({
            selected: function( event, ui ) { 
                var $variable = $('.ui-selected').val(); 
                console.log($variable);
            }
        });
    });

答案 3 :(得分:0)

参数ui有一个名为selected的属性,它是对所选dom元素的引用,您可以在该元素上调用innerHTML

您的代码$('.ui-selected').innerHTML尝试为类innerHTML

的dom元素返回jQuery包装器元素的ui-selected属性
$(function () {
    $("#select-image").selectable({
        selected: function (event, ui) {
            var $variable = ui.selected.innerHTML; // or $(ui.selected).html()
            console.log($variable);
        }
    });
});

演示:Fiddle