Question

我试图迭代jQuery元素的集合，如下所示：

var l = $(".ace_line").length;
$(".ace_line").each($(function(index,element) {
    console.log("Element = " + element);
    console.log(index + ": " + element.text());
}));

当我检查l时，它的值为39，所以我知道该集合不为空。但是，当我遍历集合时，element未定义。

我做错了什么？

任何帮助将不胜感激！

Answer 1

那里有几个问题：

您正在$()中回放回调，这使得jQuery认为您正在使用$(document).ready(function...)的简写版本。由于DOM已准备好，它会调用该函数（一次）将jQuery实例作为第一个参数传递，而根本不传递第二个参数。
您使用$()周围的element 。 element只是一个DOM元素，而不是一个jQuery实例，所以要在它上面调用text，你需要先将它包起来。

所以：

var l = $(".ace_line").length;
$(".ace_line").each(function(index,element) {
// No $( here ------^
    var $el = $(element);                     // <=== Do wrap `element`
    console.log("Element = " + $el);
    console.log(index + ": " + $el.text());   // <=== Use $el
}); // <== Removed a ) here

请注意，更常见的事情是使用this：

var l = $(".ace_line").length;
$(".ace_line").each(function(index) {
    var $el = $(this);                        // <===
    console.log("Element = " + $el);
    console.log(index + ": " + $el.text());   // <===
});

Answer 2

从每个函数中删除$(，如下所示：

var l = $(".ace_line").length;
$(".ace_line").each(function(index,element) {
    console.log("Element = " + element);
    console.log(index + ": " + $(element).text());
});

此外，您的element将是HTML DOM元素，而不是jQuery项目，因此要获得.text()，您需要$(element).text()

Answer 3

您使用了错误的语法$(function(){})
缓存变量使您的脚本更快
for比each()
使用for，您无需再次使用$()包装元素

<强>的jQuery

var lines = $(".ace_line"); //caching the element
var l = lines.length; //getting length for loop without selecting element again
for (var j = 0; j < l; j++){ //for loop where j is your index
    console.log(lines.eq(j)); //getting the element by using jQuery's eq()
    console.log(lines.eq(j).text()); //use any jQuery function on the element
}

每次迭代都在jQuery中定义元素

3 个答案: