insertar - obtener contenido de un div javascript

¿Cómo obtener el elemento innerHTML de jquery seleccionable?

Question

Tengo una lista generada por php cuyos elementos de lista se pueden seleccionar mediante el widget seleccionable jquery. La lista para todos los propósitos y propósitos es:

<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>

Y el jQuery seleccionable se declara como:

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

Un evento tiene lugar después de que se haya seleccionado un elemento de la lista, en el ejemplo que se envía a la consola del navegador. Sin embargo, la salida es "indefinida". El selector $(''.ui-selected''). Es correcto, ya que se muestra como un objeto en la consola del navegador. ¿A dónde me voy mal?

Answer 1

El parámetro ui tiene una propiedad llamada selected que es una referencia al elemento dom seleccionado, puede llamar a innerHTML en ese elemento.

Su código $(''.ui-selected'').innerHTML intenta devolver la propiedad innerHTML de un elemento de envoltura jQuery para un elemento dom con la clase ui-selected

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

Demo: Fiddle

Answer 2

Tratar

.text() o .html() lugar de .innerHTML

Answer 3

Use .val() lugar de .innerHTML para obtener el valor de la opción seleccionada

Use .text() para obtener el texto de la opción seleccionada

Gracias por corregir :)

Answer 4

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

o

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

o

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