锋言锋语

NferZhuang的自留地

jQuery选择器的返回值

前言

今天有一段业务是通过jQuery查询到所有li元素,然后遍历并找到指定的元素执行一些处理。第一反应就是:

var $li = $("li");
$li.forEach({...})

然而,程序一运行就报错:Uncaught TypeError: $(…).forEach is not a function

通过查询资料,发现jQuery选择器的返回值并不是一个js的Array数组。

jQuery选择器的返回值

stackoverflow上有一个回答:

It doesn’t return an array, it returns a jQuery object.

jQuery官方文档也有如下解释:

The jQuery object itself behaves much like an array; it has a length property and the elements in the object can be accessed by their numeric indices [0] to [length-1]. Note that a jQuery object is not actually a Javascript Array object, so it does not have all the methods of a true Array object such as join().

注意:jQuery选择器返回的是jQuery对象,这个对象是一个类数组(Array Like)的对象,有length属性,并且可以通过中括号([])下表的方式访问其中的元素,但是并没有数组的其它api函数,因此也就无法使用forEach进行遍历。

jQuery过滤出指定元素

在js的数组中可以通过find()函数找到指定的一个元素,也可以通过filter()函数找到所有符合要求的元素。但是在jQuery中find()和filter()是两个完全不一样的函数。

  • find: Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
  • filter: Reduce the set of matched elements to those that match the selector or pass the function’s test.

英文解释比较长,但是有两个关键点:find是找后代(descendants),filter是缩小(Reduce)集合的范围。因此,如果要过滤出指定的元素,则需要使用filter函数。

而一个更通用的方法是使用选择器,比如:$(“div”).filter(“.rain”) 等同于 $(“div .rain”)。

jQuery对象转换为数组

一般我们不这么用,但是我们要知道如何将jQuery对象转换为一个标准的Array数组。

方法就是jQuery提供了makeArray()函数:Convert an array-like object into a true JavaScript array.

注意,makeArray是直接挂载在jQuery的全局对象上的,即使用方法如下:

var obj = $( "li" );
var arr = $.makeArray( obj );

( typeof obj === "object" ) === true;
$.isArray( arr ) === true;

 

LEAVE A REPLY

loading