Funciones y selectores de JQuery

kenyis01 · #1 (**permalink**) 08/12/2014, 14:45

Hola. Me decidí a aprender Javascript y JQuery. Estoy haciendo un mini curso y me dan un ejercicio de selectores y funciones, es muy básico pero ya no sé qué estoy haciendo mal.

Me piden:

Cita:

Creá una variable llamada $objetivo en script.js y usá el signo = para asignarla al selector de jQuery que representa el n.º 4 en la lista ordenada. ¡Cuando ejecutes tu código, debería desaparecer!

Mi HTML:

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <title>Simplificar, simplificar</title>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div> ¡Acordate!
            <ul class="lista">
                <li>
                    <ol>
                        <li>Comenzá con la palabra clave 'function'</li>
                        <li>Los argumentos van entre ()</li>
                        <li>Las acciones van entre {}</li>
                        <li>¡jQuery es para tontos!</li>
                    </ol>
                </li>
                <li>Los argumentos van separados por comas.</li>
                <li>¡Los argumentos pueden incluir otras funciones!</li>
            </ul>
        </div>   
    </body>
</html>

Código Javascript:

Ver original// ¡Escribe tu código de jQuery en la línea 3!
 
var $objetivo = $('');
 
$(document).ready(function() {    
    $objetivo.fadeOut('fast');
});

Probé con varias cosas en var $objetivo = $('');, desde class, id, todo y no me sale :@... alguno sabe que pasa?

Alexis88 · #2 (**permalink**) 08/12/2014, 16:36

No sucede lo que esperas porque ni siquiera estás realizando una selección. Esta lectura puede serte de ayuda.

Saludos

elporfirio · #3 (**permalink**) 09/12/2014, 09:43

mmm el código JS debe quedar algo así:

Código:

var $objetivo = $('.lista').find('ol').children().last();
 
$(document).ready(function() {    
    $objetivo.fadeOut('fast');
});

Es la forma correcta si alguien te dice utilizar:

Código:

var $objetivo = $('.lista ol li').last();

Esta mal hecho pues lo estas haciendo con selectores CSS ¿entonces para que necesitas jQuery?

Alexis88 · #4 (**permalink**) 09/12/2014, 16:53

Técnicamente, no estaría mal el uso de selectores CSS al momento de seleccionar un elemento del DOM con jQuery, de hecho, esa es una de las particularidades de la librería, sin embargo, los métodos de selección que ofrece, pueden llegar a ser ―en algunos casos― más rápidos, solo que para esto tendrá que aprender cuáles son y cómo debe de usarlos.

Solo para que quede de referencia: http://api.jquery.com/category/traversing/

Saludos

kenyis01 · #5 (**permalink**) 09/12/2014, 18:09

Muchísimas gracias por la ayuda y por los links, voy a ojearlos de seguro.

EDIT: Traté de hacer como lo puso @elporfirio pero me sigue tirando "¡Uy! Probá otra vez. ¿Estás modificando al 4to 'li' hijo de la lista ordenada? "

Está mal hacerlo de esta manera? (me tira error igualmente):

Código Javascript:

Ver originalvar $objetivo = $('.ordenada');
 
$(document).ready(function() {    
    $objetivo.fadeOut('fast');
});

Código HTML:

Ver original!DOCTYPE html>
<html>
    <head>
        <title>Simplificar, simplificar</title>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div> ¡Acordate!
            <ul>
                <li>
                    <ol>
                        <li>Comenzá con la palabra clave 'function'</li>
                        <li>Los argumentos van entre ()</li>
                        <li>Las acciones van entre {}</li>
                        <li class="ordenada">¡jQuery es para tontos!</li>
                    </ol>
                </li>
                <li>Los argumentos van separados por comas.</li>
                <li>¡Los argumentos pueden incluir otras funciones!</li>
            </ul>
        </div>   
    </body>
</html>

También probé esto y me sigue tirando error, qué estoy haciendo mal?

Código HTML:

Ver original<!DOCTYPE html>
<html>
    <head>
        <title>Simplificar, simplificar</title>
        <script type='text/javascript' src='script.js'></script>
    </head>
    <body>
        <div> ¡Acordate!
            <ul>
                <li class="item1">
                    <ol>
                        <li>Comenzá con la palabra clave 'function'</li>
                        <li>Los argumentos van entre ()</li>
                        <li>Las acciones van entre {}</li>
                        <li>¡jQuery es para tontos!</li>
                    </ol>
                </li>
                <li>Los argumentos van separados por comas.</li>
                <li>¡Los argumentos pueden incluir otras funciones!</li>
            </ul>
        </div>   
    </body>
</html>

Código Javascript:

Ver original// ¡Escribe tu código de jQuery en la línea 3!
 
var $objetivo = $('li.item1').find('ol').last();
 
$(document).ready(function() {    
    $objetivo.fadeOut('fast');
});

Alexis88 · #6 (**permalink**) 09/12/2014, 20:12

Te faltó colocar dentro del ready a la línea en la que declaras la variable y tomas al elemento, pero ojo, de esa forma, estás tomando a toda la lista ordenada, no al último ítem de la misma.

Solo cambia esto:

Código Javascript:

Ver originalvar $objetivo = $('li.item1').find('ol').last();

Por esto:

Código Javascript:

Ver originalvar $objetivo = $('li.item1').find('li').last();

Saludos

kenyis01 · #7 (**permalink**) 09/12/2014, 20:49

Traté de hacer de esa forma y tampoco funciona... no sé si es un error del curso o si hay que hacerlo de una manera específica.

Por las dudas paso el link a ver si alguno lo puede hacer y decirme.

Codeacademy Jquery

Alexis88 · #8 (**permalink**) 09/12/2014, 23:20

¿Y en qué parte incluyes a la librería jQuery? Además, en ese enlace, no veo que hayas reacomodado la línea que te indiqué.

Déjalo así:

Código Javascript:

Ver original$(document).ready(function() {
    $('ol').find('li').last().fadeOut('fast');
});

DEMO

Saludos

kenyis01 · #9 (**permalink**) 10/12/2014, 07:26

Tu manera funciona, pero el curso necesita de hacerse en una manera específica y con variables.

Por eso no entiendo por qué no funciona cuando declaro la variable y después la uso, no es lo mismo que estas haciendo vos?

Código Javascript:

Ver originalvar $objetivo = $('ol').find('li').last();
 
$(document).ready(function() {    
    $objetivo.fadeOut('fast');
});

No es lo mismo hacer eso, que esto?

Código Javascript:

Ver original$(document).ready(function() {
    $('ol').find('li').last().fadeOut('fast');
});

Alexis88 · #10 (**permalink**) 10/12/2014, 10:21

No, porque tu script se encuentre en la cabecera del documento, por lo tanto, carga antes de la carga de los elementos del documento, es decir, cuando carga tu script, no existen la listas que has creado, por lo tanto, la variable $objetivo, no obtiene al elemento en cuestión. Tienes que declararla dentro del método ready para que funcione correctamente ya que dicho método ejecuta su función luego de la carga de los elementos del documento.

Saludos

marlanga · #11 (**permalink**) 11/12/2014, 12:48

No hace falta ejecutar tres métodos (selector, find, last) para encontrar un elemento, pudiéndolo recuperar sólo con un selector.

Lo que tienes que hacer es comprender cómo funcionan los selectores en jQuery (la mayoría son los mismos que usa CSS) y utilizar el mejor para lo que buscas.

Para eso sirve la documentación.
http://api.jquery.com/category/selectors/

Alexis88 · #12 (**permalink**) 11/12/2014, 13:47

Cita:

Iniciado por marlanga

No hace falta ejecutar tres métodos (selector, find, last) para encontrar un elemento, pudiéndolo recuperar sólo con un selector.

Eso fue lo que inicialmente le sugerí, pero nuestro compañero elporfirio no está de acuerdo.

disainfo · #13 (**permalink**) 08/01/2015, 12:35

La línea que debe de llevar es la siguiente:
var $objetivo=$('li:last-child');
o si no:
var $objetivo = $('li:nth-child(4)');