¿Cómo obtener el HTML interno del elemento jquery seleccionable?

2 minutos de lectura

Tengo una lista generada por php cuyos elementos de la lista se pueden seleccionar usando el widget seleccionable de jquery. La lista a todos los efectos 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, se envía a la consola del navegador. Sin embargo, la salida es “indefinida”. el seleccionador $('.ui-selected'). es correcto ya que se muestra como un objeto en la consola del navegador. ¿Dónde me estoy equivocando?

  • Creo que innerHTML() solo funciona para elementos de documentos, no para objetos jQuery. Usa .html() en su lugar

    -Kiro Coneski

    13 de septiembre de 2013 a las 12:15

  • <ul id="#select-image"> no sería igualado por $("#select-image")tienes que hacerlo <ul id="select-image"> para que el selector coincida. No estoy seguro de si este es el caso en su HTML real o simplemente un error tipográfico en el ejemplo anterior.

    –Rogier Pennink

    13 de septiembre de 2013 a las 12:16


  • – Kiro Coneski ha encontrado el problema y la solución. Sugiero que lo publique como respuesta para que pueda darle una marca verde.

    usuario2489311

    13 de septiembre de 2013 a las 12:26

Probar

.texto() o .html() en vez de .innerHTML

avatar de usuario
Ganesh Pandhere

Usar .val() en vez de .innerHTML para obtener el valor de la opción seleccionada

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

Gracias por corregir 🙂

$(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);
            }
        });
    });

o

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

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

Tu codigo $('.ui-selected').innerHTML trata de devolver el innerHTML propiedad de un elemento contenedor de jQuery para un elemento dom con clase ui-selected

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

Manifestación: Violín

¿Ha sido útil esta solución?