web-dev-qa-db-ja.com

選択可能なjquery要素のinnerHTMLを取得する方法は？

Jquery selectableウィジェットを使用してリスト項目を選択できるphpで生成されたリストがあります。すべての意図と目的のリストは次のとおりです。

<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').は、ブラウザーのコンソールにオブジェクトとして表示されるので正しいです。どこがおかしいの？

javascriptjqueryhtmlinnerhtmlselectable
34
user2489311

試して

。text（） または 。html（）.innerHTMLの代わりに

53
Tushar Gupta - curioustushar

選択したオプションの値を取得するには、.innerHTMLの代わりに.val()を使用します

.text()を使用して、選択したオプションのテキストを取得します

修正してくれてありがとう:)

3
Ganesh Pandhere
$(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
Sasidharan

パラメータuiには、選択したdom要素への参照であるselectedというプロパティがあります。その要素でinnerHTMLを呼び出すことができます。

コード$('.ui-selected').innerHTMLは、クラスui-selectedを持つdom要素のjQueryラッパー要素のinnerHTMLプロパティを返します。

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

デモ： フィドル

0
Arun P Johny