jQuery插件Adjacent实现动态获取相邻元素增加自定义效果

Adjacent翻译为中文是相邻的意思，顾名思义jQuery插件Adjacent就是获取相邻元素集合，然后给相邻元素增加自定义的效果，如获取相邻的<p>，<span>或类等等，了解Adjacent插件之前先了解几个筛选查找函数如下：
1，prev()取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

2，next()取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（可以使用nextAll）。可以用一个可选的表达式进行筛选。

3，add()把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。

Adjacent的JS库文件非常简单，代码如下：

1. jQuery.fn.adjacent = function(filter) {
2. var $all = this;
3. for (var $curr = this.prev(filter); $curr.length > 0; $curr = $curr.prev(filter)) {
4. $all = $all.add($curr);
5. }
6. for (var $curr = this.next(filter); $curr.length > 0; $curr = $curr.next(filter)) {
7. $all = $all.add($curr);
8. }
9. return $all;
10. };

了解上面三个筛选查找函数prev、next和add后，这个jQuery插件Adjacent就非常简单了，只是一个结合prev和next的筛选查找函数工具，先看一下简单的实例

1. $('#active').adjacent('.foo');
2. SELECTED?
3. <p class="foo"></p>                  no
4. <p></p>                                         no
5. <p class="foo"></p>                  yes
6. <p class="foo"></p>                  yes
7. <p class="foo" id="active"></p>      yes
8. <p class="foo"></p>                  yes
9. <p></p>                                         no
10. <p class="foo"></p>                  no
11. <p class="foo"></p>                  no

获取ID为active对象类名为foo的相邻元素，左边的SELECTED结果可知只能获取相邻元素，这个插件就这么简单。那么这个插件到底有什么用? 选取相邻元素，或类名相同集，或同一元素集。

如何应用大家可根椐具体的实际情况，比如动态给相邻元素增加CSS样式以便突出效果等。

点我下载jQuery插件Adjacent实现动态获取相邻元素增加自定义效果 JS库文件

点我查看jQuery插件Adjacent实例演示