Question

我是一个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＃容器，其中包含每个都有多个li的ul元素。我想访问第n个li并淡化元素，但是控制台抛出了一个错误，说明fadeIn没有这样的方法。你能帮我解决一下吗？

Answer 1

jQuery返回一个jquery对象，它是一种包含DOMELements的数组。

执行：this.moreItems[this.current]时，实际上是从jquery数组中提取DOMElement - ＆gt;你必须把它变成一个jquery对象才能调用fadeIn（）！

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

您还可以使用.eq(index)将匹配的集合过滤为与索引对应的唯一元素：

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

<强> DEMO

除此之外，您在问题中显示的一段代码有几个语法错误：

要向原型添加功能，您应该：
```
MyApp.prototype.myUsefulFunction = function() {}
```
而不是MyApp.prototype.myUsefulFunction() {}

使用new运算符返回MyApp

的新实例

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

Answer 2

要创建用于链接的jQuery方法，您需要扩展jQuery.fn

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

    })
}

您现在可以像使用任何其他jQuery方法一样使用它

   $(selector).myUsefulFunction()

Answer 3

题外话：

对于类的创建实例，您需要使用 new ：

var app = new myApp（config）;
myApp 和 MyApp 是一个不同的变量。

jQuery和链接问题

3 个答案: