階層選擇器 (jQuery 4)

官網連結

※>和空格

$(function() {
    $("div > p" ).css('color', 'lightgreen');
});
----------
<div>
    div1
    <p>p1</p>
    <div>
        div2
        <p>p2</p>
    </div>
</div>
<div>
    div3
    <form>
        <p>p3</p>
    </form>
</div>

※「>」是有父子關係的，以這個例子就是div的兒子是p的，所以p1和p2會被選中

※如果下$("div p" )，就沒有父子關係了，所以不管幾層，div下有p的就被選中，所以p1、p2、p3都會被選中

※如果下$("div >")，表示div的兒子都要選中，所以p1、div2、p2、p3都會選中

※如果下$("div > div > p")，那就只有p2被選中

※+

$(function() {
    $("a + div + p" ).css('color', 'lightgreen');
});
----------
<span>span1</span>
<a>a</a>
<div>
    div
    <span>span2</span>
</div>
<p>p

※+表示同一層的下一個，英文是next，所以上一個不是喔！

※這個例子，p會被選中

※如果下$("a + div+")，p也會被選中，因為表示div的下一個，沒有特別指定是什麼元素
假設程式碼的最後是div不是p，那範例就沒有東西被選中，而這個例子div還是會被選中

※如果下$("a + div")，div和span2會被選中

※$("a + div")，a和div之間不能有其他標籤

※~

$(function() {
    $("a ~ div" ).css('color', 'lightgreen');
});
----------
<div>div1</div>
<a>a</a>
<div>div2</div>
<div>
    div3
    <span>span</span>
</div>
<input type="text" value="input" />

※~表示同一層的意思，但上一個(prev)還是不會理它，以這個例子就是和a同層，而且是div的要選中，所以會選中div2、div3、span

※如果下$("a ~" )，那div2、div3、span、input會被選中

※如果a和div中間有其他元素也是可以的


※不管那一種階層，自己都不會選中