如果你对jquery比较熟悉的话，应该用过 eq, first, last, get, prev, next, siblings等过滤器和方法。本文，我们就用迭代设计模式来封装实现，类似的功能
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <style> 9 div,p{ 10 border:1px solid red; 11 margin:10px; 12 padding:10px; 13 } 14 </style> 15 <script> 16 ;(function (window, undefined) { 17 var Iterator = function (el, container) { 18 var oContainer = container && document.querySelector(container) || document, 19 aNode = oContainer.querySelectorAll(el), 20 length = aNode.length, 21 index = 0, 22 splice = [].splice; 23 var isArray = function( obj ){ 24 return Object.prototype.toString.call ( obj ) === '[object Array]'; 25 }; 26 return { 27 first : function () { 28 index = 0; 29 return aNode[index]; 30 }, 31 last : function () { 32 index = length - 1; 33 return aNode[index]; 34 }, 35 prev : function () { 36 if( --index >= 0 ) { 37 return aNode[index]; 38 }else { 39 index = 0; 40 return null; 41 } 42 }, 43 next : function () { 44 if( ++index < length ) { 45 return aNode[index]; 46 }else { 47 index = length - 1; 48 return null; 49 } 50 }, 51 get : function ( num ) { 52 index = num >= length ? length - 1 : num; 53 (index < 0) && (index = 0); 54 return aNode[index]; 55 }, 56 eachItem : function ( fn ) { 57 //G().eachItem( fn, xx, xx, xx ); 58 //args 存储的是 除了第一个参数之外的所有参数 59 var args = splice.call( arguments, 1 ); 60 for( var i = 0; i < length; i++ ){ 61 fn.apply( aNode[i], args ); 62 } 63 }, 64 dealItem : function( n, fn ){ 65 fn.apply( this.get( n ), splice.call( arguments, 2 ) ); 66 }, 67 exclusive : function( num, aFn, curFn ){ 68 this.eachItem( aFn ); 69 if( isArray( num ) ) { 70 for( var i = 0, len = num.length; i < len; i++ ){ 71 this.dealItem( num[i], curFn ); 72 } 73 }else { 74 this.dealItem( num, curFn ); 75 } 76 } 77 }; 78 }; 79 window.Iterator = Iterator; 80 })(window, undefined); 81 window.onload = function(){ 82 var oIter = Iterator( 'p', '#box' ); 83 // var oNode = oIter.first(); 84 85 // var oNode = oIter.get(2); 86 // oNode.style.backgroundColor = 'green'; 87 // oNode = oIter.prev(); 88 // oNode.style.backgroundColor = 'green'; 89 // oNode = oIter.prev(); 90 // oNode = oIter.next(); 91 // oNode.style.backgroundColor = 'orange'; 92 93 // oIter.eachItem(function( c, s ){ 94 // this.innerHTML = c; 95 // this.style.color = s; 96 // }, '跟ghostwu学习设计模式', 'red' ); 97 98 // oIter.dealItem( 0, function( c, s ){ 99 // console.log( c, s ); 100 // this.innerHTML = c; 101 // this.style.color = s; 102 // }, '跟着ghostwu学习设计模式', 'red' ); 103 104 oIter.exclusive( [2,3], function(){ 105 this.innerHTML = '跟着ghostwu学习设计模式'; 106 this.style.color = 'red'; 107 }, function(){ 108 this.innerHTML = '跟着ghostwu学习设计模式'; 109 this.style.color = 'green'; 110 } ); 111 112 } 113 </script> 114 </head> 115 <body> 116 <div id="box"> 117 <p>this is a test string</p> 118 <p>this is a test string</p> 119 <p>this is a test string</p> 120 <p>this is a test string</p> 121 <p>this is a test string</p> 122 </div> 123 <p>this is a test string</p> 124 <p>this is a test string</p> 125 </body> 126 </html>