jQuery中的遍歷函數使用方法
- 迷茫原創
- 2017-01-23 14:29:261071瀏覽
jQuery 遍歷函數包含了篩選、尋找和串聯元素的方法
函數 說明
.add() 將元素新增至符合元素的集合中。
.andSelf() 把堆疊中之前的元素集加入到目前集合中。
.children() 取得匹配元素集合中每個元素的所有子元素。
.closest() 從元素本身開始，逐級向上級元素匹配，並返回最先匹配的祖先元素。
.contents() 取得符合元素集合中每個元素的子元素，包括文字和註解節點。
.each() 對 jQuery 物件進行迭代，為每個匹配元素執行函數。
.end() 結束目前鏈中最近的一次篩選操作，並將匹配元素集合返回到前一次的狀態。
.eq() 將匹配元素集合縮減為位於指定索引的新元素。
.filter() 將匹配元素集合縮減為匹配選擇器或匹配函數傳回值的新元素。
.find() 取得目前匹配元素集合中每個元素的後代，由選擇器進行篩選。
.first() 將匹配元素集合縮減為集合中的第一個元素。
.has() 將匹配元素集合縮減為包含特定元素的後代的集合。
.is() 根據選擇器檢查目前符合元素集合，如果存在至少一個符合元素，則傳回 true。
.last() 將匹配元素集合縮減為集合中的最後一個元素。
.map() 把目前符合集合中的每個元素傳遞給函數，產生包含回傳值的新 jQuery 物件。
.next() 獲得匹配元素集合中每個元素緊鄰的同儕元素。
.nextAll() 獲得匹配元素集合中每個元素之後的所有同儕元素，由選擇器進行篩選（可選）。
.nextUntil() 取得每個元素之後所有的同儕元素，直到遇到符合選擇器的元素為止。
.not() 從符合元素集合中刪除元素。
.offsetParent() 獲得用於定位的第一個父元素。
.parent() 取得目前符合元素集合中每個元素的父元素，由選擇器篩選（可選）。
.parents() 取得目前符合元素集合中每個元素的祖先元素，由選擇器篩選（可選）。
.parentsUntil() 取得目前符合元素集合中每個元素的祖先元素，直到遇到符合選擇器的元素為止。
.prev() 獲得匹配元素集合中每個元素緊鄰的前一個同輩元素，由選擇器篩選（可選）。
.prevAll() 獲得匹配元素集合中每個元素之前的所有同儕元素，由選擇器進行篩選（可選）。
.prevUntil() 取得每個元素之前所有的同儕元素，直到遇到匹配選擇器的元素為止。
.siblings() 獲得匹配元素集合中所有元素的同儕元素，由選擇器篩選（可選）。
.slice() 將匹配元素集合縮減為指定範圍的子集。
each的用法
1.數組中的each
var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
}); //上面这个each输出的结果分别为：one,two,three,four
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]); }); //其实arr1为一个二维数组，item相当于取每一个一维数组， //item[0]相对于取每一个一维数组里的第一个值 //所以上面这个each输出分别为：1 4 7
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(i) {
alert(obj[i]); }); //这个each就有更厉害了，能循环每一个属性 //输出结果为：1 2 3 42.遍歷Dom元素中
<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});});</script></head><body><button>输出每个列表项的值</button><ul><li>Coffee</li><li>Milk</li><li>Soda</li></ul></body></html>
依次弹出Coffee，Milk，Soda3.eachmap的比較元素中
$(function(){
var arr = [];
$(":checkbox").each(function(index){
arr.push(this.id);
});
var str = arr.join(",");
alert(str);})3.eachmap和map的比較ID值；each方法：
定義一個空數組，透過each方法，往數組加ID值；最後將數組轉換成字串後，alert這個值；$(function(){
var str = $(":checkbox").map(function() {
return this.id;
}).get().join();
alert(str);})map方法:
將每個:checkbox執行return this.id；並將這些返回值，自動的保存為jQuery對象，然後用get方法將其轉換成原生javascript數組，再使用join方法轉換成字串，最後alert這個值；
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );});當有需一個陣列的值的時候，用map方法，很方便。
4.jquery中使用each
例遍數組，同時使用元素索引和內容。 （i是索引，n是內容）程式碼如下:
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );});例遍對象，同時使用成員名稱和變數內容。 （i是成員名稱，n是變數內容）程式碼如下:<input name="aaa" type="hidden" value="111" /> <input name="bbb" type="hidden" value="222" /> <input name="ccc" type="hidden" value="333" /> <input name="ddd" type="hidden" value="444"/>例遍dom元素，此處以一個input表單元素作為範例。 如果你dom中有一段這樣的代碼
$.each($("input:hidden"), function(i,val){
alert(val); //输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i); //输出索引为0，1，2，3
alert(val.name); //输出name的值
alert(val.value); //输出value的值});然後你使用each如下代碼如下:
<ol class="commentlist">
<li class="comment">
<div class="comment-body">
<p>嗨，第一层评论</p>
<div class="reply">
<a href="#" class=".comment-reply-link">回复</a>
</div>
</div>
<ul class="children">
<li class="comment">
<div class="comment-body">
<p>第二层评论</p>
<div class="reply">
<a href="#" class=".comment-reply-link">回复</a>
</div>
</div></li>
</ul>
</li></ol>
5.each中根據this查找元素
實現效果”回复5.each中根據this查找元素
實現效果”回復”經過的時候才顯示出來🎜$("div.reply").hover(function(){
$(this).find(".comment-reply-link").show();},function(){
$(this).find(".comment-reply-link").hide();});🎜JS程式碼如下🎜<ul id="ulSingle">
<li class="liStyle">
1. 阿斯顿按时<label id="selectTips" style="display: none" class="fillTims">请选择</label>
<!--begin选项-->
<ul>
<li class="liStyle2">
<span id="repSingle_repSingleChoices_0_labOption_0">A </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl00$hidID" id="repSingle_repSingleChoices_0_hidID_0" value="1" />
<input id="repSingle_repSingleChoices_0_cheSingleChoice_0" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl00$cheSingleChoice" /></li>
<li class="liStyle2">
<span id="repSingle_repSingleChoices_0_labOption_1">B </span>.阿萨德发<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl01$hidID" id="repSingle_repSingleChoices_0_hidID_1" value="2" />
<input id="repSingle_repSingleChoices_0_cheSingleChoice_1" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl01$cheSingleChoice"
<li class="liStyle2">
<span id="repSingle_repSingleChoices_0_labOption_2">C </span>.阿斯顿<input type="hidden" name="repSingle$ctl00$repSingleChoices$ctl02$hidID" id="repSingle_repSingleChoices_0_hidID_2" value="3" />
<input id="repSingle_repSingleChoices_0_cheSingleChoice_2" type="checkbox" name="repSingle$ctl00$repSingleChoices$ctl02$cheSingleChoice" /></li>
</ul>
<!--end选项-->
<br />
</li>
</ul>🎜實現效果，驗證判斷題是否都有選擇🎜//验证单选题是否选中
$("ul#ulSingle>li.liStyle").each(function (index) {
//选项个数
var count = $(this).find("ul>li>:checkbox").length;
var selectedCount = 0
for (var i = 0; i < count; i++) {
if ($(this).find("ul>li>:checkbox:eq(" + i + ")").attr("checked")) {
selectedCount++;
break;
}
}
if (selectedCount == 0) {
$(this).find("label#selectTips").show();
return false;
}
else {
$(this).find("label#selectTips").hide();
}
})🎜js程式碼🎜jQuery.each(object, [callback])🎜🎜6.官方解釋🎜概述🎜🎜通用例遍方法，可用於例遍物件和陣列。 🎜🎜不同於例遍 jQuery 物件的 $().each() 方法，此方法可用於例遍任何物件。回呼函數有兩個參數：第一個為物件的成員或陣列的索引，第二個為對應變數或內容。如果需要退出 each 循環可使回呼函數傳回 false，其它傳回值將被忽略。 🎜