Problema de jQuery y encadenamiento

Soy un novato de jQuery y tal vez estoy a punto de hacer una pregunta muy básica, pero realmente estoy luchando para descubrir por qué el encadenamiento de jQuery no funciona en mi caso. 

var container = $('#container'),
items = container.find('ul.items'),
moreItems = items.children('li.moreItems');

var config = {
container : container,
items : items,
moreItems : moreItems
}

var app = myApp(config);

function MyApp(config) {
this.container = config.container;
this.items = config.items;
this.moreItems = config.moreItems;
this.current = 0;
}

MyApp.prototype.myUsefulFunction() {
this.moreItems[this.current].fadeIn();
}

Supongamos que tengo un div#container lleno de elementos ul que tienen más de un li cada uno. Me gustaría acceder al n-th li y hacer que el elemento aparezca gradualmente, pero la consola me devuelve un error, indicando que fadeIn no tiene tal método. ¿Puedes ayudarme a solucionarlo?

preguntado el 10 de marzo de 12 a las 14:03

¿Quiso decir esto en su lugar? MyApp.prototype.myUsefulFunction = function() { this.moreItems[this.current].fadeIn(); } -

3 Respuestas

jQuery devuelve un objeto jquery, que es una especie de matriz que contiene DOMELements.

Cuando tu lo hagas: this.moreItems[this.current] en realidad extrae el DOMElement de la matriz jquery -> ¡tiene que convertirlo en un objeto jquery para poder llamar a fadeIn()!

$(this.moreItems[this.current]).fadeIn();

También puedes usar .eq(índice) para filtrar el conjunto coincidente al único elemento correspondiente al índice:

this.moreItems.eq(this.current).fadeIn();

DEMO

Aparte de eso, el fragmento de código que muestra en su pregunta tiene varios errores de sintaxis:

  1. Para agregar una función al prototipo, debe hacer:

    MyApp.prototype.myUsefulFunction = function() {}

    y no MyApp.prototype.myUsefulFunction() {}

  2. Use el new operador para devolver una nueva instancia de MyApp

    var app = new MyApp(config); // also spelling mistake: myApp != MyApp !!

respondido 10 mar '12, 15:03

Para crear un método jQuery para encadenar, debe extender jQuery.fn

$.fn.myUsefulFunction=function() {
    return this.each(function(){
        $(this).fadeIn();

    })
}

Ahora puede usar esto como lo haría con cualquier otro método jQuery

   $(selector).myUsefulFunction()

respondido 10 mar '12, 15:03

Fuera de contexto:

  1. Para crear una instancia de clase que necesita usar FAQ:

    aplicación var = nueva myApp(config);

  2. miAplicación y MyApp es una variable diferente.

respondido 10 mar '12, 15:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.