jQuery遍历(2)

jQuery遍历(2)
(1)、jQuery遍历之next()方法
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，此时可以用next()方法
理解节点查找关系：
如下class="item-1"元素就是红色部分，那蓝色的class="item-2"就是它的兄弟元素

• 1
• 2
• 3

next()无参数 允许我们找遍元素集合中紧跟着这些元素的直接兄弟元素，并根据匹配的元素创建一个新的 jQuery 对象。 注意：jQuery是一个合集对象，所以通过next匹配合集中每一个元素的下一个兄弟元素 next()方法选择性地接受同一类型选择器表达式 同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

(2)、jQuery遍历之prev()方法
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法
理解节点查找关系：
如下蓝色的class="item-2"的li元素，红色的节点就是它的prev兄弟节点

• 1
• 2
• 3

prev()无参数 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合 注意：jQuery是一个合集对象，所以通过prev是匹配合集中每一个元素的上一个兄弟元素 prev()方法选择性地接受同一类型选择器表达式 同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

(3)、jQuery遍历之siblings()
jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素的同辈元素，此时可以用siblings()方法
理解节点查找关系：
如下蓝色的class="item-2"的li元素，红色的节点就是它的siblings兄弟节点

• 1
• 2
• 3

siblings()无参数 取得一个包含匹配的元素集合中每一个元素的同辈元素的元素集合 注意：jQuery是一个合集对象，所以通过siblings是匹配合集中每一个元素的同辈元素 siblings()方法选择性地接受同一类型选择器表达式 同样的也是因为jQuery是合集对象，可能需要对这个合集对象进行一定的筛选，找出目标元素，所以允许传一个选择器的表达式

(4)、jQuery遍历之add()方法
jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中
.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。
简单的看一个案例：
操作：选择所有的li元素，之后把p元素也加入到li的合集中

• list item 1
• list item 3

新的p元素

处理一：传递选择器 $('li').add('p') 处理二：传递dom元素 $('li').add(document.getElementsByTagName('p')[0]) 还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了 $('li').add('

新的p元素

').appendTo(目标位置)

(5)、jQuery遍历之add()方法
jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。$()之后就意味着这个合集对象已经是确定的，如果后期需要再往这个合集中添加一新的元素要如何处理？jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中
.add()的参数可以几乎接受任何的$()，包括一个jQuery选择器表达式，DOM元素，或HTML片段引用。
简单的看一个案例：
操作：选择所有的li元素，之后把p元素也加入到li的合集中

• list item 1
• list item 3

新的p元素

处理一：传递选择器 $('li').add('p') 处理二：传递dom元素 $('li').add(document.getElementsByTagName('p')[0]) 还有一种方式，就是动态创建P标签加入到合集，然后插入到指定的位置，但是这样就改变元素的本身的排列了 $('li').add('

新的p元素

').appendTo(目标位置)

(6)、jQuery遍历之each()
jQuery是一个合集对象，通过$()方法找到指定的元素合集后可以进行一系列的操作。比如我们操作$(“li”).css(’’) 给所有的li设置style值，因为jQuery是一个合集对象，所以css方法内部就必须封装一个遍历的方法，被称为隐式迭代的过程。要一个一个给合集中每一个li设置颜色，这里方法就是each
.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数
所以大体上了解3个重点：
each是一个for循环的包装迭代器
each通过回调的方式处理，并且会有2个固定的实参，索引与元素
each回调方法中的this指向当前迭代的dom元素
看一个简单的案例

• 滴滴滴
• Aaron

开始迭代li，循环2次 $("li").each(function(index, element) { index 索引 0,1 element是对应的li节点 li,li this 指向的是li }) 这样可以在循环体会做一些逻辑操作了，如果需要提前退出，可以以通过返回 false以便在回调函数内中止循环