Question

我需要在多个jQuery对象上调用.each（）函数，如下所示：

$('#table_1').each(function(){ /* foo */ });
$('#table_2').each(function(){ /* foo */ });
$('#table_3').each(function(){ /* foo */ });

我没有找到比单独写出每个功能更好的方法。

定义这样的函数：

$.fn.extend({
    foo: function() {

        //Some code
    }
});

$('#table_1').each(foo);

在控制台中返回“未定义函数上的无法读取属性”调用“错误”。

我在这里做错了什么？

Answer 1

foo在此包装器外部不可见，您只能使用jquery对象调用它。

而不是包裹内部

$.fn.extend({

简单地做到

var foo = function() {
    //Some code
}

或

function foo () {    
    //Some code
}

Answer 2

使用$.fn.extend扩展jQuery对象，但只需要创建一个简单的函数

var foo = function(position, obj) {
  console.log('iterated object:', obj);
}

$('#table_1').each(foo);

Answer 3

如果你想直接在每个元素上调用foo函数：

$('#table_1, #table_2, #table3').each(function() {
   $(this).foo();
});

我建议您可以在这些元素上放置一个公共类，并按此类选择：

$('.commonClass').each(function() {
   $(this).foo();
});

或者你可以在foo函数中进行迭代：

$.fn.extend({
  foo: function() {
    return this.each(function() {
      // Do your stuff here
    });
  }
});

并像这样初始化：

$('.commonClass').foo();

示例

foo()为每个选定的元素将文本颜色变为红色

＆＃13;
＆＃13;
$.fn.extend({ foo: function() { return this.each(function() { this.style = 'color:red'; }); } }); // Call the function without each() $('li').foo();
＆＃13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <ul> <li>Test</li> <li>Test</li> <li>Test</li> </ul>
＆＃13;
＆＃13;
＆＃13;

Answer 4

只需使用普通＆＃34;原生＆＃34;功能。请记住，jQuery会反转参数的顺序，因此首先是索引，然后是元素（也在上下文this中）。

function doSomething(i, el){
    $(el).html('I was changed ' + i);
}
$(div).each(doSomething);

jsFiddle：https://jsfiddle.net/sdc2a011/

在jQuery .each中使用预定义函数调用

4 个答案: