jQuery 遍歷

語言: CN / TW / HK

本節我們學習 jQuery 的遍歷。什麼是遍歷呢?遍歷是指沿著某條搜尋路線,依次對樹中每個節點均做一次訪問。訪問結點所做的操作依賴於具體的應用問題, 具體的訪問操作可能是檢查節點的值、更新節點的值等。不同的遍歷方式,其訪問節點的順序是不一樣的。遍歷是適用於多元素集合的情況,例如遍歷陣列、遍歷集合等。

jQuery 中的遍歷其實就是根據其相對於其他元素的關係來查詢 HTML 元素,以某項選擇開始,並沿著這個選擇移動,直到抵達所需要的元素為止,這一過程稱為遍歷。

遍歷DOM

jQuery 提供了多種遍歷 DOM 的方法。在講遍歷方法之間,我們先來看下面段程式碼。

示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
</head>
<body>
  <div>
    <h3>俠課島</h3>
    <div>
      <p>俠課島的課程有下面幾種:</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>按鈕</button></p>
  </div>
</body>
</html>

在這段程式碼中,元素與元素之間有不同的關係。舉個例子,如果用我們生活中的稱呼來解釋,可以將上述程式碼中 <ul> 看作是所有 <li> 元素的父元素。反之 <li> 元素就是 <ul> 元素的子元素。而其他的元素關係也可以這樣理解。

例如 <ul> 元素的它上面的 <p> 元素處於同一等級,所以可以叫同胞元素(有點像兄弟姐妹的意思)。

而最外圍的 <div> 元素可以統稱為它裡面所有元素的祖先元素。祖先元素可以是父、祖父或曾祖父元素等等。那麼在這個 最外層 <div> 元素裡面的元素就稱為後代元素,後代元素可以包括兒子、孫子、曾孫子等等。

遍歷祖先元素的方法

jQuery 中提供了一些用於向上遍歷 DOM 樹的方法,那麼向上遍歷也可以理解為遍歷祖先元素,包括某個元素的父元素、祖父元素、曾祖父元素等。

提供的方法也很簡單,從名字我們就大概能看出這個方法的作用:

方法 描述
parent() 返回被選元素的直接父元素
parents() 返回被選元素的所有祖先元素
parentsUntil() 返回介於兩個給定元素之間的所有祖先元素

parents()方法

parents() 方法用於遍歷指定元素的直接父元素。直接父元素就是包圍指定元素的這個元素,例如:

<div>
	<p>
      <span></span>
    </p>
</div>

這個 HTML 程式碼中,<span> 元素的直接父元素只有 <p> 元素,而 <div><p> 的直接父元素,<div> 也相當於 <span> 的祖父元素。

示例:

我們通過一個例子來看一下parents() 方法的使用,例如上面的 HTML 程式碼中,我們想要獲取 <h3> 元素的父元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $("h3").parent().prop('tagName');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div>
    <h3>俠課島</h3>
    <div>
      <p>俠課島的課程有下面幾種:</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點選按鈕</button></p>
  </div>
</body>
</html>

上述程式碼中,我們通過 parent() 方法找到 <h3> 的父元素,然後使用 prop() 方法返回找到的父元素的屬性和值,這用到了 tagName 屬性,也就是獲取元素的標籤名。最後通過 alert() 方法輸出獲取到的父元素標籤名。

我們看一下在瀏覽器中的效果: 通過輸出結果我們也可以看出,parent() 方法成功找到了 <h3> 元素的父元素,即 <div>

parents()方法

parents() 方法可以用於遍歷指定元素的所有祖先元素。

示例:

找到 <li> 元素的所有祖先元素:

$(function(){
    $("button").click(function(){
      var tag = $("li").parents().map(function(){
        return this.tagName;
      }).get().join(',');
      alert(tag);
    });
});

我們看一下在瀏覽器中的效果: 從上圖可以看到, <li> 元素的祖先元素有 UL,DIV,DIV,BODY,HTML

parentsUntil()方法

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

示例:

例如查詢 <li> 元素在 .div_con 類選擇器所在元素之間的所有祖先元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $("li").parentsUntil(".div_con").map(function(){
        return this.tagName;
      }).get().join(',');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p>俠課島的課程有下面幾種:</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點選按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果:

遍歷後代元素的方法

jQuery 中向下遍歷DOM 樹的方法有 children()find() 方法,我們一起來看一下。

children()方法

children() 方法用於返回指定元素的所有直接子元素。

示例:

查詢 .div_con 元素的所有直接子元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $(".div_con").children().map(function(){
        return this.tagName;
      }).get().join(',');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p>俠課島的課程有下面幾種:</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點選按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果:

可以看到,.div_con 的直接子元素有三個,分別是 <h3><div><p>。而其他的元素可以看作 .div_con 的後代元素。

find()方法

find() 方法返回指定元素的所有後代元素,包括子元素、孫元素、曾孫元素等等。

示例:

例如我們獲取 <body> 元素的所有後代元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $("body").find("*").map(function(){
        return this.tagName;
      }).get().join(',');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p>俠課島的課程有下面幾種:</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點選按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果: 上圖中列出了所有 <body> 元素的後代元素。

遍歷同胞元素的方法

jQuery 中遍歷 DOM 樹中同胞元素的方法有下面幾種:

方法 描述
siblings() 返回指定元素的所有同胞元素
next() 返回指定元素的下一個同胞元素
nextAll() 返回指定元素的所有跟隨的同胞元素
nextUntil() 返回介於兩個給定引數之間的所有跟隨的同胞元素
prev() 返回指定元素的上一個同胞元素
prevAll() 返回指定元素的所有前面的同胞元素
prevUntil() 返回介於兩個給定引數之間的所有前面的同胞元素

siblings()方法

siblings() 方法可以獲得匹配集合中每個元素的同胞,通過選擇器進行篩選是可選的。

示例:

例如輸出 sib 類選擇器的同胞元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      var tag = $(".sib").siblings().map(function(){
        return this.tagName;
      }).get().join(',');
      alert(tag);
    });
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p class="sib">俠課島的課程有下面幾種:</p>
      <ul>
        <li>Python</li>
        <li>C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點選按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果:

next()方法

next() 方法返回被選元素的後一個同級元素。

示例:

例如我們將 li_sib 類選擇器後面的一個元素顏色設定為紅色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".li_sib").next().css({"color":"red"});
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p class="sib">俠課島的課程有下面幾種:</p>
      <ul>
        <li>Python</li>
        <li class="li_sib">C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
      </ul>
    </div>
    <p><button>點選按鈕</button></p>
  </div>
</body>
</html>

nextAll()方法

nextAll() 方法與 next() 方法的使用差不多。但是 nextAll() 方法用於返回被選元素之後的所有同級元素。

示例:
$(function(){
    $(".li_sib").nextAll().css({"color":"red"});
});

在瀏覽器中的演示效果:

nextUntil()方法

nextUntil() 方法返回兩個給定引數之間的每個元素之後的所有同級元素。

示例:

例如將 starend 之間的元素的字型顏色設定為紅色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".start").nextUntil(".end").css({"color":"red"});
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p class="sib">俠課島的課程有下面幾種:</p>
      <ul>
        <li>Python</li>
        <li class="start">C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
        <li class="end">Node.js</li>
        <li>CSS</li>
      </ul>
    </div>
    <p><button>點選按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果:

prev()方法

prev() 方法與 next() 方法相反,用於返回指定元素的上一個同胞元素。

示例:

star 的上一個元素字型顏色設定為紅色:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".start").prev().css({"color":"red"});
  });
</script>
</head>
<body>
  <div class="div_con">
    <h3>俠課島</h3>
    <div>
      <p class="sib">俠課島的課程有下面幾種:</p>
      <ul>
        <li>Python</li>
        <li class="start">C++</li>
        <li>Java</li>
        <li>PHP</li>
        <li>GoLand</li>
        <li class="end">Node.js</li>
        <li>CSS</li>
      </ul>
    </div>
    <p><button>點選按鈕</button></p>
  </div>
</body>
</html>

在瀏覽器中的演示效果:

prevAll()方法

prevAll() 方法與 nextAll 方法相反,用於返回指定元素的所有前面的同胞元素。

示例:

end 類選擇器之前的所有元素字型顏色設定為紅色:

$(function(){
    $(".end").prevAll().css({"color":"red"});
});

在瀏覽器中的演示效果:

prevUntil()方法

prevUntil() 方法用於返回介於兩個給定引數之間的所有前面的同胞元素。

示例:
$(function(){
    $(".start").prevUntil("end").css({"color":"red"});
});

在瀏覽器中的演示效果:

連結:https://www.9xkd.com/