jQuery 選取 span 父元素並套用紅色邊框樣式代碼解析

原始代碼

<script>
$(document).ready(function(){
    $("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>

HTML 結構

<div class="ancestors">
  <div>div (曾祖父)
    <ul>ul (祖父)
      <li>li (直接父) <span>span</span> </li>
    </ul>
  </div>
  <div>div (祖父)
    <p>p (直接父) <span>span</span> </p>
  </div>
</div>

執行結果

• 兩個 <span> 的**直接父元素**（<li> 和 <p>）獲得紅色字體與紅色實線邊框。
• 祖父、曾祖父元素不受影響（.parent() 僅取直接父節點）。

關鍵 API

• $("span")：選取所有 <span> 元素集合。
• .parent()：取得集合中每個元素的**直接父節點**，形成新 jQuery 物件（去重）。
• .css({...})：批次設定 CSS 樣式屬性。

延伸：取得所有祖先

$("span").parents().css(...);        // 所有祖先（父、祖父、曾祖父...）
$("span").parentsUntil(".ancestors"); // 直到 .ancestors 為止的祖先
$("span").closest("div");             // 最近的 div 祖先

總結

代碼作用：為每個 <span> 的直接父元素套用紅色字體與紅色邊框，常用於除錯視覺化 DOM 階層關係。