jQuery 遍历函数

jQuery 遍历函数包括了用于筛选、查找和串联元素的方法。

函数	描述
.add()	实例 找到所有 div 并添加边框。然后将所有段落添加到该 jQuery 对象，并把它们的背景设置为黄色： $("div").css("border", "2px solid red")         .add("p")         .css("background", "yellow"); 定义和用法 add() 方法将元素添加到匹配元素的集合中。 语法 1 .add(selector) 参数 描述 selector 字符串值，表示查找供添加到匹配元素集合的元素的选择器表达式。 语法 2 .add(elements) 参数 描述 elements 添加到匹配元素集合的一个或多个元素。 语法 3 .add(html) 参数 描述 html 添加到匹配元素集合的 HTML 片段。 语法 4 .add(jQueryObject) 参数 描述 jQueryObject 添加到匹配元素集合的已有 jQuery 对象。 语法 5 .add(selector, context) 参数 描述 selector 字符串值，表示查找供添加到匹配元素集合的元素的选择器表达式。 context 选择器开始进行匹配的位置。
.andSelf()	实例 找到所有 div，以及其中的所有段落，并为它们添加两个类名。请注意，由于未使用 .andSelf()，div 没有黄色背景色。 $("div").find("p").andSelf().addClass("border"); $("div").find("p").addClass("background"); 亲自试一试 定义和用法 add() 方法把堆栈中之前的元素集添加到当前集合。 语法 .andSelf() 详细说明 请思考这个拥有简单列表的页面： <ul>    <li>list item 1</li>    <li>list item 2</li>    <li class="third-item">list item 3</li>    <li>list item 4</li>    <li>list item 5</li> </ul> 以下代码的结果是项目 3,4,5 拥有红色背景： $("li.third-item").nextAll().andSelf()   .css("background-color", "red"); 亲自试一试 首先，初始的选择器会定位项目 3，初始化的堆栈存有仅包含该项目的集合。调用 .nextAll() 会将项目 4, 5 的集合推入堆栈。最后，调用 .andSelf() 会合并这两个集合，所创建的 jQuery 对象指向按照文档顺序的所有三个项目：{[<li.third-item>,<li>,<li> ]}。
.children()	获得匹配元素集合中每个元素的所有子元素。
.closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
.contents()	获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
.each()	定义和用法 each() 方法规定为每个匹配元素规定运行的函数。 提示：返回 false 可用于及早停止循环。 语法 $(selector).each(function(index,element)) 参数 描述 function(index,element) 必需。为每个匹配元素规定运行的函数。 ·         index - 选择器的 index 位置 ·         element - 当前的元素（也可使用 "this" 选择器）
.end()	结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。 定义和用法 end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。 语法 .end() 详细说明 大多数 jQuery 的遍历方法会操作一个 jQuery 对象实例，并生成一个匹配不同 DOM 元素集的新对象。当发生这种情况时，应该会把新的元素集推入维持在对象中的堆栈内。每次成功的筛选方法调用都会把新元素推入堆栈中。如果我们需要老的元素集，可以使用 end() 从堆栈中弹出新集合。 假设页面中有一对很短的列表： <ul class="first">    <li class="foo">list item 1</li>    <li>list item 2</li>    <li class="bar">list item 3</li> </ul> <ul class="second">    <li class="foo">list item 1</li>    <li>list item 2</li>    <li class="bar">list item 3</li> </ul> 例子 1 主要是在利用 jQuery 的链条属性（命令链）时，jQuery 会比较有用。如果不使用命令链，我们一般是通过变量名来调用之前的对象，这样我们就不需要操作堆栈了。不过通过 end()，我们可以把所有方法调用串联在一起： $('ul.first').find('.foo').css('background-color', 'red')   .end().find('.bar').css('background-color', 'green'); 亲自试一试 这条命令链检索第一个列表中类名为 foo 的项目，并把它们的背景设置为红色。end() 会将对象还原为调用 find() 之前的状态，所以第二个 find() 查找的是 <ul class="first"> 内的 '.bar' ，而不是在列表的 <li class="foo"> 中查找，并将匹配元素的背景设置为绿色。最后的结果是第一个列表中的项目 1 和项目 3 被设置了带颜色的背景，而第二个列表中的项目没有任何变化。
.eq()	将匹配元素集合缩减为位于指定索引的新元素。
.filter()	定义和用法 filter() 方法将匹配元素集合缩减为匹配指定选择器的元素。 语法 .filter(selector) 参数 描述 selector 字符串值，包含供匹配当前元素集合的选择器表达式。
.find()	获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。 语法 .find(selector) 参数 描述 selector 字符串值，包含供匹配当前元素集合的选择器表达式。
.first()	将匹配元素集合缩减为集合中的第一个元素。
.has()	将匹配元素集合缩减为包含特定元素的后代的集合。 定义和用法 has() 将匹配元素集合缩减为拥有匹配指定选择器或 DOM 元素的后代的子集。 语法 .has(selector) 参数 描述 selector 字符串值，包含匹配元素的选择器表达式。
.is()	根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。 定义和用法 is() 根据选择器、元素或 jQuery 对象来检测匹配元素集合，如果这些元素中至少有一个元素匹配给定的参数，则返回 true。 语法 .is(selector) 参数 描述 selector 字符串值，包含匹配元素的选择器表达式。
.last()	将匹配元素集合缩减为集合中的最后一个元素。
.map()	把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。 定义和用法 map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。 语法 .map(callback(index,domElement)) 参数 描述 callback(index,domElement) 对当前集合中的每个元素调用的函数对象。 详细说明 由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。 .map() 方法对于获得或设置元素集的值特别有用。请思考下面这个带有一系列复选框的表单： <form method="post" action="">   <fieldset>     <div>       <label for="two">2</label>       <input type="checkbox" value="2" id="two" name="number[]">     </div>     <div>       <label for="four">4</label>       <input type="checkbox" value="4" id="four" name="number[]">     </div>     <div>       <label for="six">6</label>       <input type="checkbox" value="6" id="six" name="number[]">     </div>     <div>       <label for="eight">8</label>       <input type="checkbox" value="8" id="eight" name="number[]">     </div>   </fieldset> </form> 我们能够获得复选框 ID 组成的逗号分隔的列表： $(':checkbox').map(function() {   return this.id; }).get().join(','); 亲自试一试 本次调用的结果是字符串："two,four,six,eight"。 在 callback 函数内部，this 引用每次迭代的当前 DOM 元素。该函数可返回单独的数据项，或者是要被插入结果集中的数据项的数组。如果返回的是数组，数组内的元素会被插入集合中。如果函数返回 null 或 undefined，则不会插入任何元素。
.next()	获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()	获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil()	获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.not()	从匹配元素集合中删除元素。 定义和用法 not() 从匹配元素集合中删除元素。 语法 1 .not(selector) 参数 描述 selector 字符串值，包含用于匹配元素的选择器表达式。 语法 2 .not(element) 参数 描述 element 一个或多个需要从匹配集中删除的 DOM 元素。 语法 3 .not(function(index)) 参数 描述 function(index) 用于检测集合中每个元素的函数。this 是当前 DOM 元素。
.offsetParent()	获得用于定位的第一个父元素。 语法 .offsetParent() 请思考带有基本嵌套列表的页面，其中带有定位元素： <ul class="level-1">   <li class="item-i">I</li>   <li class="item-ii" style="position: relative;">II     <ul class="level-2">       <li class="item-a">A</li>       <li class="item-b">B         <ul class="level-3">           <li class="item-1">1</li>           <li class="item-2">2</li>           <li class="item-3">3</li>         </ul>       </li>       <li class="item-c">C</li>     </ul>   </li>   <li class="item-iii">III</li> </ul> 如果我们从项目 A 开始，我们可以找到其定位祖先元素： $('li.item-a').offsetParent().css('background-color', 'red');
.parent()	获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
.parents()	定义和用法 parents() 获得当前匹配元素集合中每个元素的祖先元素，使用选择器进行筛选是可选的。 .parents(selector) 参数 描述 selector 字符串值，包含用于匹配元素的选择器表达式。
.parentsUntil()	定义和用法 parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到（但不包括）被选择器、DOM 节点或 jQuery 对象匹配的元素。 语法 1 .parentsUntil(selector,filter) 参数 描述 selector 可选。字符串值，规定在何处停止对祖先元素进行匹配的选择器表达式。 filter 可选。字符串值，包含用于匹配元素的选择器表达式。 语法 2 .parentsUntil(element,filter) 参数 描述 element 可选。DOM 节点或 jQuery 对象，指示在何处停止对祖先元素的匹配。 filter 可选。字符串值，包含用于匹配元素的选择器表达式。 详细说明 如果给定一个表示 DOM 元素集合的 jQuery 对象，.parentsUntil() 方法允许我们在 DOM 树中搜索这些元素的祖先元素，直到遇到被选择器（传递到方法中的参数）匹配的元素为止。返回的 jQuery 对象包含所有祖先元素，但不包括由 .parentsUntil() 方法规定的选择器匹配的那个元素。 如果不匹配或未应用选择器，则将选区所有祖先元素；在这种情况下，该方法选取的元素与未提供选择器时的 .parents() 相同。 对于 jQuery 1.6，DOM 节点或 jQuery 对象，而不是选择器，可用作 .parentsUntil() 方法的第一个参数。 该方法接受可选的选择器表达式作为其第二参数。如果应用这个参数，则将通过检测元素是否匹配该选择器对元素进行筛选。
.prev()	获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。 语法： .prev(selector) 参数  描述 selector   字符串值，包含用于匹配元素的选择器表达式。
.prevAll()	获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。 语法 .prevAll(selector) 参数  描述 selector   字符串值，包含用于匹配元素的选择器表达式。
.prevUntil()	获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。 语法 1 .prevUntil(selector, filter) 参数  描述 selector   可选。字符串值，包含指示在何处停止匹配前方同胞元素的选择器表达式。 filter 可选。字符串值，包含用于匹配元素的选择器表达式。 语法 2 .prevUntil(element, filter) 参数  描述 element   可选。指示在何处停止匹配前方同胞元素的 DOM 节点或 jQuery 对象。 filter 可选。字符串值，包含用于匹配元素的选择器表达式。
.siblings()	获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。 .siblings(selector)
.slice()	将匹配元素集合缩减为指定范围的子集。 .slice(selector,end) 数 描述 selector 基于 0 的整数值，指示开始选取元素的位置。 如果是负数，则指示从集合末端开始的偏移量。 end 基于 0 的整数值，指示结束选取元素的位置。 如果是负数，则指示从集合末端开始的偏移量。 如果省略，则选取范围会在集合末端结束。 <ul>   <li>list item 1</li>   <li>list item 2</li>   <li>list item 3</li>   <li>list item 4</li>   <li>list item 5</li> </ul> $('li').slice(2).css('background-color', 'red'); 此次调用的结果是项目 3、4 和 5 的背景被设置为红色 $('li').slice(2, 4).css('background-color', 'red'); 只有项目 3 和 4 会被选取。