2011-01-24 16 views
6

Soy nuevo en Protoype.JS y lo estoy probando un poco porque escuché que era bueno, pero estoy atascado bastante rápido. Tan fácil como esto es con jQuery, parece ser el fin del mundo para obtener el texto en un elemento. He intentado innerHTML de varias maneras, pero lo único que puedo obtener es "indefinido".Prototype.js obtener texto de un elemento

alert($$('.mnu_item').innerHTML); 
alert($('content').innerHTML); 

Ninguno de estos trabajos. El contenido es un div con id "contenido" y .mnu_item es una etiqueta de anclaje con clase ".mnu_item". No entiendo cuál es el problema, probablemente sea algo estúpido, pero sería genial si alguien pudiera señalarme en la dirección correcta.

EDIT: he descubierto que no es el innerHTML que no funciona pero es el selector de clase. La segunda línea del código de arriba funciona. ¿Cómo puedo seleccionar un elemento por su clase en la última versión de Prototype si esta no es la forma correcta?

+0

use jQuery, y simplemente llame a $ ('content ') .html(); para recuperar html –

+2

rima educativa: es bastante difícil de decir sin el HTML. – acme

Respuesta

6

¿Se ha cargado el DOM cuando ejecuta el script? Si no está ejecutando este código en un window.onload o colocándolo en el final del cuerpo, entonces los elementos no existen cuando se ejecuta.

Intente colocar su script justo dentro de la etiqueta de cierre </body>.

<body> 
    <!-- my content --> 

    <script type="text/javascript"> 
     alert($('content').innerHTML); 
    </script> 
</body> 

Además, su primera línea es la selección correcta, y luego se volverá una serie de elementos, por lo que habrá innerHTMLundefined.

Para iterar la matriz, se puede hacer esto:

$$('.mnu_item').each(function(val,i) { 
    alert(val.innerHTML); 
}); 

o si quiere terminar con una serie de los innerHTML valores, haga lo siguiente:

var values = $$('.mnu_item').map(function(val,i) { 
    return val.innerHTML; 
}); 
+0

¡Hola, gracias! No sabía que devolvería una matriz, como dije, un problema bastante estúpido. – hhoud

+0

@ hh354: De nada. – user113716

0

$ ('content'). InnerHTML debería funcionar. Verifique su HTML, asegúrese de que el ID sea único.

1

Asegúrese de que el DOM se carga antes de ejecutar estas pruebas:

$(document).on('dom:loaded', function() { 
    /* code to execute after dom has loaded */ 
}) 

La primera línea del código $$ ('. Mne_item') no funciona porque $$ devuelve una matriz de todos los elementos que coinciden con la regla css. Entonces $$ ('.mne_item') da una matriz de todos los elementos dom que tiene la clase mne_item. Usted puede pedir al primero mediante el uso de la primera método o iterar sobre todos los artículos como este:

$$('.mne_item').each(function(elem) { 
    // elem is the li elements extended by all Element methods of prototype 
}); 

Si utiliza $ en jQuery, en realidad se utiliza un patrón similar, pero oculta el cada construcción. Simplemente aplica el método encadenado a todos los elementos o solo al primero.

La segunda línea del código $ ('content'). InnerHTML debería funcionar. $ es un atajo para document.getElementById, por lo que debería darle un nodo DOM atrás. La razón por la que esto no funciona es que no hay un nodo donde id = content, probablemente porque el dom no está cargado aún.

Para obtener más información sobre los métodos de ver el prototipo en la API: http://api.prototypejs.org/

Compruebe también los métodos DOM por defecto: http://quirksmode.org/dom/w3c_core.html

+0

¿Hay alguna diferencia usando $ (documento) .on ('dom: loaded', function() {...}); a diferencia de document.observe ('dom: loaded', function() {...}); Supongo que no ... nunca visto dom: cargado utilizado en on() before:/ – VBAssassin

+1

Actúan de la misma manera, on es un método más nuevo que también puede manejar un argumento selector (ver API) –

0

texto var = $$ ('etiqueta [= para "display_on_amazon"]') .first(). textContent;

El código anterior funcionó para mí.

Con respecto, $$ ('mnu_item'). InnerHTML

Cuando usted está tratando a buscar con selector de clase, prototipo devuelve matriz de múltiples elments, mediante el uso de [0] o primera) Sistema método (apuntará en el primer elemento de esa matriz, después puede usar innerHtml (para obtener html dentro del elemento) o textContent (para obtener el contenido de texto de ese elemento, método nativo de javascript)

Cuestiones relacionadas