zHiyerarşi, ast – üst ilişkisi anlamına gelmektedir. Web tasarımında ise en bilindik hiyerarşi yapısı HTML DOM (Document Object Model) ağacıdır. Örneğin;etiketinden önceetiketini tanımlamayız.etiketini daimaetiketinin içerisine yazarız. Bu HTML’deki DOM yapısının hiyerarşik düzeninden kaynaklanır.etiketini general,etiketini ise albay olarak düşünebilirsiniz.

etiketleri teğmen,etiketleri ise çavuş olsunlar. Bir paragraf etiketinin içerisinde hiçbir zaman

etiketi tanımlamayız. Böyle fanteziler denemeyin. (= Aynı şekilde

etiketinin içinde de’yi tanımlamayız. Kısacası çavuş teğmen’e, teğmen de albay’a emir veremez. İşte tüm bu ast – üst ilişkilerini belirleyen HTML DOM yapısıdır ve jQuery ile bu ast – üst ilişkilerinde bazı düzenlemeler yapabiliriz.

<ul>
    <li>liste elemanı 1</li>
    <li>liste elemanı 2</li>
    <li>liste elemanı 3</li>
    <li>liste elemanı 4</li>
    <li>liste elemanı 5</li>
</ul>
 
<script>
    $('li:nth-child(2)').siblings().css('color', 'mediumslateblue');
</script> 

Sırasız bir liste oluşturuldu ve ikinci elemanının kardeşi olan tüm elemanların rengini “orta şeker mavi” olarak belirlenmiş oldu. liste oluşturuldu ve ikinci elemanının kardeşi olan tüm elemanların rengini “orta şeker mavi” olarak belirlenmiş oldu.