jQuery 精確選擇一級子 div：child 選擇器 (>) 與 find() 的區別

需求

HTML 結構：

<div id="container">
  <div class="nav_title"><div>...</div></div>
  <div class="nav_con"><div>...</div></div>
  <div class="nav_foot"><div>...</div><div>...</div></div>
</div>

需獲取 container 直屬的三個 div（含 class），排除嵌套的內層 div。

解決方案

$("#container > div")

> 是 CSS 子選擇器，僅匹配**直接子元素**。對比：

• $("#container div") / $("#container").find("div")：後代選擇器，會遞歸匹配所有層級的 div。
• $("#container").children("div")：jQuery 方法，等價於 > div，同樣只取一級子元素。

原生 JS 實現

var container = document.getElementById("container");
var divs = Array.from(container.children).filter(el => el.tagName === "DIV");

children 屬性僅包含元素節點，自動過濾文本節點，比 childNodes 更乾淨。