jQuery de filtreler-2

ALT GRUP FİLTRELER

Aşağıdaki filtrelerin örnekleri için şu HTML kod bloğunu örnek olarak kullanıyoruz.

<div>
  <p>Div içindeki 1. paragraf</p>
  <h4>Div içindeki 1. ve tek h4 etiketi</h4>
  <span>Div içindeki 1. span</span>
  <p>Div içindeki 2. paragraf</p>
  <span>Div içindeki 2. span</span>
  <p>Div içindeki 3. paragraf</p>
</div>

:first-child

Ebeveyninin ilk çocuğu olan nesneleri seçer. Eğer belirtilen nesne ebeveyninin(parent) ilk çocuğuysa seçer. Aksi takdirde bir işlem yapılmaz.

$('p:first-child').css("color", "red");
/* p etiketlerinden ebeveyni olan div etiketinin ilk çocuğu olan(Div içindeki 1. paragraf) p etiketini seçer ve yazıyı kırmızı yapar.*/

$('span:first-child').css("color", "blue");
/* span etiketi, ebeveyni olan div etiketinin ilk çocuğu olmadığı için bir işlem yapılmaz. Parentin ilk çocuğu p etiketidir.*/

:first-of-type

Belirtilen eleman kendi türleri açısından ebeveyninin ilk çocuğuysa elemanı seçer ve işlem yapar.

$('p:first-of-type').css("color", "blue");
/* p etiketinin ebeveyni olan div etiketinin çocukları arasındaki ilk p etiketini seçer ve yazı rengini mavi yapar. (Div içindeki 1. paragraf)*/

$('span:first-of-type').css("color", "blue");
/* span etiketinin ebeveyni olan div etiketinin çocukları arasındaki ilk span etiketini seçer ve yazı rengini mavi yapar. (Div içindeki 1. span)*/

:last-child

Ebeveyninin son çocuğu olan nesneleri seçer. Eğer belirtilen nesne ebeveyninin(parent) son çocuğuysa seçer. Aksi takdirde bir işlem yapılmaz.

$('p:last-child').css("color", "red");
/* p etiketlerinden ebeveyni olan div etiketinin son çocuğu olan(Div içindeki 3. paragraf) p etiketini seçer ve yazıyı kırmızı yapar.*/

$('span:last-child').css("color", "blue");
/* span etiketi, ebeveyni olan div etiketinin son çocuğu olmadığı için bir işlem yapılmaz. Parentin son çocuğu p etiketidir.*/

:last-of-type

Belirtilen eleman kendi türleri açısından ebeveyninin son çocuğuysa elemanı seçer ve işlem yapar.

$('p:last-of-type').css("color", "blue");
/* p etiketinin ebeveyni olan div etiketinin çocukları arasındaki son p etiketini seçer ve yazı rengini mavi yapar. (Div içindeki 3. paragraf)*/

$('span:last-of-type').css("color", "red");
/* span etiketinin ebeveyni olan div etiketinin çocukları arasındaki son span etiketini seçer ve yazı rengini kırmızı yapar. (Div içindeki 2. span)*/

:nth-child(n)

Ebeveynlerinin n. çocuğu olan elemanları seçer. Eğer n. çocuk belirtilen eleman değilse işlem yapılmaz. Elemanların indis değerleri 1 den başlar.

$('p:nth-child(3)').css("color", "blue");
/* div etiketinin 3. çocuğu p değil span etiketi olduğu için bir işlem yapılmaz.*/

$('span:nth-child(3)').css("color", "red");
/* div etiketinin 3. çocuğu olan span etiketini seçer ve yazı rengini kırmızı yapar.*/

:nth-of-type(n)

Ebeveynlerinin belirtilen eleman açısından n. cocuğu olan elemanları seçer.

$('p:nth-of-type(3)').css("color", "blue");
/* div etiketinin üçüncü(3.) p çocuğunu seçer ve yazı rengini mavi yapar.(Div içindeki 3. paragraf)*/

$('span:nth-of-type(2)').css("color", "red");
/* div etiketinin ikinci(2.) span çocuğunu seçer ve yazı rengini mavi yapar.(Div içindeki 2. span)*/

:nth-last-child(n)

Ebeveynlerinin sondan n. çocuğu olan elemanları seçer. Eğer n. çocuk belirtilen eleman değilse işlem yapılmaz. Elemanların indis değerleri sondan sayarken de 1 den başlar.

$('p:nth-last-child(3)').css("color", "blue");
/* div etiketinin sondan 3. çocuğu olan p etiketini seçer ve yazı rengini mavi yapar. (Div içindeki 2. paragraf)*/

$('span:nth-last-child(1)').css("color", "red");
/* div etiketinin sondan 1.(yani en son) çocuğu span değil p etiketi olduğu için bir işlem yapılmaz.*/

:nth-last-of-type(n)

Ebeveynlerinin belirtilen eleman açısından sondan n. cocuğu olan elemanları seçer.

$('p:nth-last-of-type(2)').css("color", "blue");
/* div etiketinin sondan (2.)ikinci p çocuğunu seçer ve yazı rengini mavi yapar. (Div içindeki 2. paragraf) */ 

$('span:nth-last-of-type(1)').css("color", "red");
/* div etiketinin sondan (1.)yani en son span çocuğunu seçer ve yazı rengini kırmızı yapar. (Div içindeki 2. span)*/

:only-child

Belirtilen eleman ebeveyninin tek çocuğu ise elemanı seçer. Ebeveyninin başka bir çocuğu yani belirtilen elemanın kardeşi varsa işlem yapılmaz.

$('p:only-child').css("color", "blue");
/* p etiketi ebeveyni olan div etiketinin tek çocuğu olmadığı için bir işlem yapılmaz.*/

$('h4:only-child').css("color", "red");
/* h4 etiketi ebeveyni olan div etiketinin tek çocuğu olmadığı için bir işlem yapılmaz.*/

:only-of-type

Eğer belirtilen eleman ebeveyninin kendi türü açısından tek çocuğuysa işlem yapılır. Eğer aynı etiketten başka bir çocuk etiket varsa işlem yapılmaz.

$('span:only-of-type').css("color", "blue");
/* span etiketi ebeveyni olan div etiketi içerisinde tek span olmadığı için yani başka span etiketi olduğu için işlem yapılmaz.*/

$('h4:only-of-type').css("color", "red");
/* h4 etiketi ebeveyni olan div etiketi içerisinde tek h4 olduğu için işlem yapılır ve yazı rengi kırmızı olur.*/