8. díl - Selektory v jQuery, část druhá

JavaScript jQuery Selektory v jQuery, část druhá

V tomto článku si ukážeme další selektory, které můžeme používat v jQuery.

Příprava HTML obsahu

Stejně jako minule si selektory budeme ukazovat na stejném HTML dokumentu, pro úplnost uvádím znovu jeho HTML a CSS:

HTML:

<ul id="web">
   <h2>WEB</h2>
   <li>HTML</li>
   <li>CSS</li>
   <li>JS</li>
   <li>PHP</li>
   <li>ASP .NET</li>
   <li>JAVA</li>
</ul>
<ul id="desktop">
   <h2>DESKTOP</h2>
   <li>JAVA</li>
   <li>C# .NET</li>
   <li>VB .NET</li>
   <li>PYTHON</li>
   <li>PASCAL</li>
</ul>
<ul id="zvirata">
   <h2>ZVÍŘATA</h2>
   <li>PES</li>
   <li>KOČKA</li>
   <li>PAPOUŠEK</li>
   <li>LEV</li>
   <li>DRAK</li>
   <li>ŽELVA</li>
</ul>
<ul id="barvy">
   <h2>BARVY</h2>
   <li>RŮŽOVÁ</li>
   <li>MODRÁ</li>
   <li>ČERNÁ</li>
   <li>ZELENÁ</li>
</ul>
<ul id="nesmysly">
   <h2>NESMYSLY</h2>
   <li data-nesmysl="69">69</li>
   <li data-nesmysl="69 xoxo">69 xoxo</li>
   <li data-nesmysl="69-nth">69-nth</li>
   <li data-nesmysl="nu69kl tik">nu69kl tik</li>
   <li data-nesmysl="hute 69p ui">hute 69p ui</li>
   <li data-nesmysl="qwe 69rty" id="qwerty">qwe 69rty</li>
   <li data-nesmysl="69 BIT">69 BIT</li>
   <li data-nesmysl="party 69">party 69</li>
</ul>

CSS:

body
{
   background: #e5e5e5;
   color: #3d3d3d;
   margin: 0px;
   font-family: 'Open Sans';
}

*
{
   margin: 0px;
   padding: 0px;
   text-decoration: none;
   list-style-type: none;
   border: 0px;
}

ul
{
   float: left;
   padding: 10px 20px;
   text-align: center;
}

ul li
{
   background : #CACACA;
   color      : #444;
   width      : 100px;
   border     : 2px solid #A6A6A6;
   margin     : 10px 0;
   padding    : 5px 10px;
   font-family: 'Open Sans';
   font-size  : 18px;
   text-align: left;
}

.green
{
   background : #61E452;
   color      : #ededed;
   border     : 2px solid #1A7010;
}

.blue
{
   background : #0080C0;
   color      : #ededed;
   border     : 2px solid #004080;
}

.yellow
{
   background : #F4FF2F;
   color      : #444;
   border     : 2px solid #D0CB04;
}

.red
{
   background : #ed1c24;
   color      : #ededed;
   border     : 2px solid #7f0011;
}

Pořadový selektor

"Pořadovým selektorem" se rozumí selektor, který nám vybere elementy podle určitého pořadí v rodičovském elementu.

$(":first-child")

First-child nám vybere, jak již tušíme z názvu, první shodující se element.

$("ul li:first-child").addClass("blue");**

Výsledek:

$(":first-of-type")

First-of-type nám vybere první shodující se element daného typu. Typem myslím například odstavec - p.

$("ul li:first-of-type").addClass("blue");

Výsledek:

Jaký je tedy rozdíl mezi :first-child a :first-of-type ?

Když si zkusíme na našem příkladu použít tyto selectory, zjistíme, že nám funguje jen first-of-type. Je to tím, že CSS čte vlastně zápis zprava, tedy nejdříve vybere první pozici a až poté jí přiřadí k elementu. Ale naše první položka není první v seznamu, tím je nadpis.

Možná vám to připadá zmatené, ale když si to vyzkoušíte, tak jistě pochopíte! :)

$(":last-child")

Je opakem ":first-child", vybere nám poslední element.

$("ul li:last-child").addClass("blue");

Výsledek:

$(":last-of-type")

Vybere se nám vždy poslední element daného typu.

$("ul li:last-of-type").addClass("blue"); // v našem případě stejný efekt jako minule.

Výsledek:

$(":nth-child(i)")

Zde se nám vybere i-tý element.

$("ul li:nth-child(3)").addClass("blue");

Výsledek:

$(":nth-of-type(i)")

A nyní zase i-tý element daného typu.

$("ul li:nth-of-type(3)").addClass("blue");

Výsledek:

$(":nth-last-child(i)")

Tento selektor je podobný jako ":nth-child(i)", avšak zde vybíráme od konce.

$("ul li:nth-last-child(3)").addClass("blue");

Výsledek:

$(":nth-last-of-type(i)")

Stejně jako u předchozího selektoru vybíráme od konce, avšak přímo pro náš element.

$("ul li:nth-last-of-type(3)").addClass("blue"); // v našem případě stejný efekt jako minule.

Výsledek:

$(":only-child")

Selector nám vybere všechny elementy, které jsou v nějakém rodičovském elementu samy.

$("h2:only-child").addClass("blue");

Výsledek:

$(":only-of-type")

Jako u minulého musí být element sám, ale zde to znamená spíš jediný svého typu.

$("h2:only-of-type").addClass("blue");

Výsledek:

Zařadit sem můžeme i speciální jQuery selektory :lt(), :gt(), :odd, :even, :first, :last, :eq(). O nich si ale povíme až příště.

Filtr obsahu

$(":not()")

Not() zneguje libovolný selektor. Vybere tedy elementy, které ho nesplňují.

$("ul li:not([data-nesmysl='69'])").addClass("blue");

Výsledek:

$(":contains()")

Contains nám vybere elementy, které obsahují jako text nějaké slovo či textový řetězec. Dávejte si pozor na velikost písmen, je to na ni citlivé.

$("ul li:contains('A')").addClass("blue");

Všimněte si, že opravdu záleží na velikosti písmen, v posledním sloupci se nám nic co obsahuje malé a neobarví.

$(":empty")

Empty nám vybere elementy, které neobsahují žádný text.

$(":checked")

Selektor nám vybere elementy, konkrétně radio či checkbox, který je zvolený. Příště budeme pokračovat.


 

Stáhnout

Staženo 157x (1.74 kB)
Aplikace je včetně zdrojových kódů v jazyce javascript

 

  Aktivity (1)

Článek pro vás napsal Honza Bittner
Avatar
Autor je vášnivý web developer. Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)

Jak se ti líbí článek?
Celkem (9 hlasů) :
4.888894.888894.888894.888894.88889


 


Miniatura
Předchozí článek
Selektory v jQuery, část první
Miniatura
Všechny články v sekci
Základy jQuery
Miniatura
Následující článek
Selektory v jQuery, část třetí

 

 

Komentáře

Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zatím nikdo nevložil komentář - buď první!