1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <div class="container"> <ul> <span> jQuery 遍歷函數包括了用於篩選、查找和串聯元素的方法</span> <li>Hello,my name is Tom!</li> <li class="error">This is my friend Jack,I'll introduce to you!</li> <li> <ul> <li>He likes balls.</li> <li class="error">He likes music. <input type="button" class="play_muc" value="播放音樂"/> <span> jQuery 遍歷函數包括了用於篩選、查找和串聯元素的方法</span> </li> <span> jQuery 遍歷函數包括了用於篩選、查找和串聯元素的方法</span> <li>He is a lazzy boy ....</li> </ul> </li> <li>Now,for me, I like music too.</li> <li class="error">I don't like eat too much!!</li> <li> <a href="#" class="surprice">點我有驚喜哦。。。</a> </li> </ul> </div> |
.find()
使用方式： .find(selector)
select是字符串值，包含供匹配當前元素集合的選擇器表達式。
獲取當前元素集合中每個元素的後代，find不會單獨使用，前面必有一個DOM元素集合的Jquery對象，.find()方法允許我們在DOM數中搜索這些元素的後代，並用匹配元素來構造一個新的Jquery對象。.find() 和 .children() 方法類似，不同的是後者僅沿著DOM樹向下遍歷單一層級。
1 2 3 4 | //所有的ul下面的li標籤裡面的字體都會變成紅色，不管li裡面嵌套了什麼 $(".surprice").click(function(){ $("ul").parent().find("li").css('color','red'); }); |
.parent() 獲得當前匹配元素集合中每個元素的父元素 (上層元素)，使用選擇器進行篩選是可選的。
此例其實也不用使用到 .parent() ，主要的語義是指點完 .surprice 後，將 ul 內的下層元素 li 加上 CSS color:red; 的樣式， ul 沒有特別分開，所以二層都會收到影響。
See the Pen jQuery-find by Jimmy_Wu (@Jimmy_Wu) on CodePen.
js bin展示開新視窗
.each()
使用方式： $(selector).each(funciton(index,element));
function(index,element) : 必需。為每個匹配元素規定運行的函數
index : 選擇器的index位置
element : 當前的元素(也可使用 “this” 選擇器)
以每一個匹配的元素作為上下文來執行一個函數。
每次執行傳遞進來的函數時，函數中的this關鍵字都指向一個不同的DOM元素(每次都是一個不同的匹配元素)。而且，在每次執行函數時，都會給函數傳遞一個表示作為執行環境的元素在匹配的元素集合中所處位置的數字值作為參數(從零開始的整數)。返回’false’ 將停止循環(就像在普通的循環中使用 “break” )。返回’true’跳至下一個循環(就像在普通的循環中使用’continue’)。
1 2 3 4 5 6 7 8 9 10 11 | //所有class值為"error"的字體都會變成紅色 $(".surprice").click(function(){ $("ul li").each(function(i,item){ // function(i,item) 指的就是 funciton(index,element)，index也可改成 i 與 item 也可以改其他的名字，這是指物件 (Object) 命名 var class_name = $(item).attr("class"); if(class_name == "error"){ $(this).css('color','red'); //等同於 $(item).css('color','red'); } }); }); |
See the Pen jQuery-each by Jimmy_Wu (@Jimmy_Wu) on CodePen.
js bin展示開新視窗
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>.each_ex4_Change colors</title> <style> div { width: 40px; height: 40px; margin: 5px; float: left; border: 2px blue solid; text-align: center; } span { color: red; } </style> <script src="https://code.jquery.com/jquery.min.js"></script> <!-- <script src="http://code.jquery.com/jquery-latest.js"></script>--> <script> $(function(){ $( "button" ).click(function () { $( "div" ).each(function ( i, domEle) { // domEle == this $( domEle ).css( "backgroundColor", "yellow" ); if ( $(domEle).is( "#stop" ) ) { $( "span" ).text( "Stopped at div i #" + i ); return false; } //console.log( i + ": " + domEle + $(domEle).text() ); }); }); }); </script> </head> <body> <button>Change colors</button> <span>Stopped at div i #4</span> <div ></div> <div ></div> <div ></div> <div ></div> <div id="stop">Stop here</div> <div></div> <div></div> <div></div> </body> </html> |
See the Pen .each_ex4_Change colors by Jimmy_Wu (@Jimmy_Wu) on CodePen.
js bin展示開新視窗
補充：比較.each() 與 jQuery.each() or $.each()
.each( function(index, Element) )
jQuery.each( collection, callback(indexInArray, valueOfElement) )
JavaScript for-loop V.S jQuery $.each(); (JavaScript 的 for 迴圈，改為jquery 的 $.each())
$.each() 函數和 $(selector).each() 是不一樣的，那個是專門用來遍歷一個jQuery對象。$.each()函數可用於迭代任何集合，無論是「名/值」對象（JavaScript對象）或數組。在迭代數組的情況下，回調函數每次傳遞一個數組索引和相應的數組值作為參數。（該值也可以通過訪問 this 關鍵字得到，但是 JavaScript 將始終將 this 值作為一個 Object ，即使它是一個簡單的字符串或數字值。）該方法返回其第一個參數，這是迭代的對象。
.children
使用方式： .children("selector");
selector : 字符串值，包含匹配元素的選擇器表達式。
如果給定表示 DOM 元素集合的 Jquery 對象， .children() 允許我們檢索 DOM 樹中的這些元素，並用匹配元素構造新的 Jquery 對象。
取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合通過可選的表達式來過濾所匹配的子元素
注意： .children() 只考慮子元素而不考慮所有後代元素。
1 2 3 4 | //根據上面代碼，只有直接跟在ul下的span會發生變化， 而存在ul下的li下的span沒有發生變化，也就是第一個和第三個span發生了變化。 $(".surprice").click(function(){ $("ul").children("span").css("color",'red'); }); |
See the Pen jQuery-children by Jimmy_Wu (@Jimmy_Wu) on CodePen.
js bin展示開新視窗