如何获取可选jQuery元素的innerHTML？答案

【问题标题】：How to get the innerHTML of selectable jquery element?如何获取可选jQuery元素的innerHTML？
【发布时间】：2013-09-18 03:01:03
【问题描述】：

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

<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 可选被声明为：

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

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

【问题讨论】：

我认为 innerHTML() 仅适用于文档元素，不适用于 jQuery 对象。改用 .html()
<ul id="#select-image"> 不会被$("#select-image") 匹配，您需要将其设为<ul id="select-image"> 以使选择器匹配它。我不确定您的实际 HTML 是否是这种情况，或者只是上面示例中的错字。
– Kiro Coneski 找到了问题和解决方案。我建议他将其发布为答案，这样我就可以给它一个绿色勾号。

标签： javascript jquery html innerhtml selectable

【解决方案1】：

试试

.text() 或 .html() 而不是 .innerHTML

【讨论】：

【解决方案2】：

使用.val() 而不是.innerHTML 来获取所选选项的值

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

感谢指正:)

【讨论】：

【解决方案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);
            }
        });
    });

【讨论】：

【解决方案4】：

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

您的代码 $('.ui-selected').innerHTML 尝试返回 jQuery 包装元素的 innerHTML 属性，用于类 ui-selected 的 dom 元素

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

演示：Fiddle

【讨论】：