Problema de jQuery y encadenamiento

I'm a jQuery rookie and maybe I'm about to ask a very basic question, but I'm really struggling while figuring out why jQuery chaining doesn't work in my case.

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

Let's suppose I have a div#container filled with ul elements that have more than one li each. I'd like to access to the n-th li and fade the element in, but the console throws me back an error, stating fadeIn has no such method. Can you please help me sort it out?

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

Did you mean this instead? MyApp.prototype.myUsefulFunction = function() { this.moreItems[this.current].fadeIn(); } -

3 Respuestas

jQuery returns a jquery object, which is a sort of array containing DOMELements.

Cuando tu lo hagas: this.moreItems[this.current] you actually extract the DOMElement from the jquery array --> you have to turn it into a jquery object to be able to call fadeIn() !

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

También puedes usar .eq(index) to filter the matched set to the only element corresponding to the index:

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

DEMO


Apart from that, the piece of code you show in your question has several syntax errors:

  1. To add a function to the prototype, you should do:

    MyApp.prototype.myUsefulFunction = function() {}
    

    y no MyApp.prototype.myUsefulFunction() {}

  2. Utilice el new operator to return a new instance of MyApp

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

respondido 10 mar '12, 15:03

To make a jQuery method for chaining you need to extend jQuery.fn

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

    })
}

You can now use this as you would any other jQuery method

   $(selector).myUsefulFunction()

respondido 10 mar '12, 15:03

Fuera de contexto:

  1. For create instance of class you need use Un nuevo:

    var app = new myApp(config);

  2. miAplicación y MyApp is a different variables.

respondido 10 mar '12, 15:03

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