JQuery и цепочки вопросов - PullRequest
Новая
       20

JQuery и цепочки вопросов

2 голосов
/ 10 марта 2012

Я новичок в jQuery, и, возможно, я собираюсь задать очень простой вопрос, но я действительно изо всех сил пытаюсь понять, почему цепочка jQuery не работает в моем случае.

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

Предположим, у меня есть контейнер div #, заполненный элементами ul, каждый из которых содержит более одного li.Я хотел бы получить доступ к n-му элементу li и добавить элемент внутрь, но консоль выдает ошибку, утверждая, что метод fadeIn не имеет такого метода.Не могли бы вы помочь мне разобраться?

Ответы [ 3 ]

5 голосов
/ 10 марта 2012

jQuery возвращает объект jquery, который является своего рода массивом, содержащим DOMELements .

Когда вы делаете: this.moreItems[this.current] вы фактически извлекаете DOMElement из массива jquery -> вы должны превратить его в объект jquery, чтобы иметь возможность вызывать fadeIn ()! 

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

Вы также можете использовать .eq (index) , чтобы отфильтровать соответствующий набор по единственному элементу, соответствующему индексу: 

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

DEMO

Кроме того, фрагмент кода, который вы показываете в своем вопросе, имеет несколько синтаксических ошибок:

  1. Чтобы добавить функцию к прототипу, вы должны сделать: 

    MyApp.prototype.myUsefulFunction = function() {}

    а не MyApp.prototype.myUsefulFunction() {}

  2. Используйте оператор new для возврата нового экземпляра MyApp

    var app = new MyApp(config); // also spelling mistake: myApp != MyApp !!
1 голос
/ 10 марта 2012

Чтобы создать метод jQuery для цепочки, вам нужно расширить jQuery.fn 

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

    })
}

Теперь вы можете использовать это как любой другой метод jQuery 

   $(selector).myUsefulFunction()
0 голосов
/ 10 марта 2012

Вне темы:

  1. Для создания экземпляра класса необходимо использовать new :

    var app = new myApp (config);

  2. myApp и MyApp - это разные переменные.

...