jQuery 遍歷

時間 2019-11-11

標籤 jquery 遍歷欄目 JQuery 简体版

原文原文鏈接

向上遍歷 DOM 樹

jQuery parent() 方法:

該方法返回被選元素的直接父元素。只會向上一級對 DOM 樹進行遍歷。html

$(document).ready(function(){
  $("span").parent();   //返回每一個 <span> 元素的的直接父元素：
});

jQuery parents() 方法:

該方法返回被選元素的全部祖先元素，它一路向上直到文檔的根元素 (<html>)。

$(document).ready(function(){
  $("span").parents();  //返回全部 <span> 元素的全部祖先：
});

能夠使用可選參數來過濾對祖先元素的搜索。

$(document).ready(function(){
  $("span").parents("ul");  //返回全部 <span> 元素的全部祖先，而且它是 <ul> 元素：
});

jQuery parentsUntil() 方法:

parentsUntil() 方法返回介於兩個給定元素之間的全部祖先元素。

$(document).ready(function(){
  $("span").parentsUntil("div");//返回介於 <span> 與 <div> 元素之間的全部祖先元素：

});

向下遍歷 DOM 樹

jQuery children() 方法：

children() 方法返回被選元素的全部直接子元素。該方法只會向下一級對 DOM 樹進行遍歷。

$(document).ready(function(){
  $("div").children();//返回每一個 <div> 元素的全部直接子元素：
});

您也能夠使用可選參數來過濾對子元素的搜索。

$(document).ready(function(){
  $("div").children("p.1"); //返回類名爲 "1" 的全部 <p> 元素，而且它們是 <div> 的直接子元素：
});

jQuery find() 方法：

find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。

$(document).ready(function(){
  $("div").find("span");//返回屬於 <div> 後代的全部 <span> 元素：
});

$(document).ready(function(){
  $("div").find("*");//返回 <div> 的全部後代：
});

在 DOM 樹中水平遍歷:

jQuery siblings() 方法:

siblings() 方法返回被選元素的全部同胞元素。

$(document).ready(function(){
  $("h2").siblings();//返回 <h2> 的全部同胞元素：
});

您也能夠使用可選參數來過濾對同胞元素的搜索。

$(document).ready(function(){
  $("h2").siblings("p");//返回屬於 <h2> 的同胞元素的全部 <p> 元素：
});

jQuery next() 方法:

next() 方法返回被選元素的下一個同胞元素。該方法只返回一個元素。

$(document).ready(function(){
  $("h2").next();//返回 <h2> 的下一個同胞元素：
});

jQuery nextAll() 方法:

nextAll() 方法返回被選元素的全部跟隨的同胞元素。

$(document).ready(function(){
  $("h2").nextAll();//返回 <h2> 的全部跟隨的同胞元素：
});

jQuery nextUntil() 方法:

nextUntil() 方法返回介於兩個給定參數之間的全部跟隨的同胞元素。

$(document).ready(function(){
  $("h2").nextUntil("h6");//返回介於 <h2> 與 <h6> 元素之間的全部同胞元素：
});

prev(), prevAll() 以及 prevUntil() 方法的工做方式與上面的方法相似，只不過方向相反而已：它們返回的是前面的同胞元素。函數

縮小搜索元素的範圍

jQuery first() 方法：

first() 方法返回被選元素的首個元素。

$(document).ready(function(){
  $("div p").first();//選取首個 <div> 元素內部的第一個 <p> 元素：

});

jQuery last() 方法：

last() 方法返回被選元素的最後一個元素。

$(document).ready(function(){
  $("div p").last();//選擇最後一個 <div> 元素中的最後一個 <p> 元素：
});

jQuery eq() 方法：

eq() 方法返回被選元素中帶有指定索引號的元素。

$(document).ready(function(){    //索引號從 0 開始，所以首個元素的索引號是 0 而不是 1
  $("p").eq(1);//選取第二個 <p> 元素（索引號 1）；
});

jQuery filter() 方法：

filter() 方法容許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。

$(document).ready(function(){
  $("p").filter(".url");//返回帶有類名 "url" 的全部 <p> 元素：
});

jQuery not() 方法：

not() 方法返回不匹配標準的全部元素。

$(document).ready(function(){
  $("p").not(".url");//返回不帶有類名 "url" 的全部 <p> 元素：
});

jQuery 遍歷方法

方法	描述
add()	把元素添加到匹配元素的集合中
addBack()	把以前的元素集添加到當前集合中
andSelf()	在版本 1.8 中被廢棄。addBack() 的別名
children()	返回被選元素的全部直接子元素
closest()	返回被選元素的第一個祖先元素
contents()	返回被選元素的全部直接子元素（包含文本和註釋節點）
each()	爲每一個匹配元素執行函數
end()	結束當前鏈中最近的一次篩選操做，並把匹配元素集合返回到前一次的狀態
eq()	返回帶有被選元素的指定索引號的元素
filter()	把匹配元素集合縮減爲匹配選擇器或匹配函數返回值的新元素
find()	返回被選元素的後代元素
first()	返回被選元素的第一個元素
has()	返回擁有一個或多個元素在其內的全部元素
is()	根據選擇器/元素/jQuery 對象檢查匹配元素集合，若是存在至少一個匹配元素，則返回 true
last()	返回被選元素的最後一個元素
map()	把當前匹配集合中的每一個元素傳遞給函數，產生包含返回值的新 jQuery 對象
next()	返回被選元素的後一個同級元素
nextAll()	返回被選元素以後的全部同級元素
nextUntil()	返回介於兩個給定參數之間的每一個元素以後的全部同級元素
not()	從匹配元素集合中移除元素
offsetParent()	返回第一個定位的父元素
parent()	返回被選元素的直接父元素
parents()	返回被選元素的全部祖先元素
parentsUntil()	返回介於兩個給定參數之間的全部祖先元素
prev()	返回被選元素的前一個同級元素
prevAll()	返回被選元素以前的全部同級元素
prevUntil()	返回介於兩個給定參數之間的每一個元素以前的全部同級元素
siblings()	返回被選元素的全部同級元素
slice()	把匹配元素集合縮減爲指定範圍的子集

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。