JQuery selectors – JavaScript, AJAX, jQuery – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

JQuery selectors – JavaScript, AJAX, jQuery – Fórum – Programujte.comJQuery selectors – JavaScript, AJAX, jQuery – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
martas36
~ Anonymní uživatel
2 příspěvky
15. 10. 2013   #1
-
0
-

Zdravím,

jakožto začátečník v jQuery se prokousávám selektory, ale zasekl jsem se na selektorech seznamů s více úrovněmi. V přiloženém kódu je jednoduchý seznam, kde se snažím přiřadit třídu jen druhé úrovni, ale žádný selektor mi na to nesedí, při všech se vybere i třetí úroveň.  

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            li {color: #000;}
            .special {color: #f00;}
        </style>   

    </head>
    <body>
        <ul id="seznam">
            <li>Auto
                <ul>
                    <li>Mazda</li>
                    <li>Ford</li>
                    <li>Škoda</li>
                    <li>Opel</li>
                </ul>
            </li>
            <li>Jídlo
                <ul>
                    <li>Chleba</li>
                    <li>Maso</li>
                    <li>Mrkev</li>
                </ul>
            </li>
            <li>Knihy
                <ul>
                    <li>Dětské
                        <ul>
                            <li>Slabikář</li>
                            <li>Slabikář 2</li>
                        </ul>
                    </li>
                    <li>Dobrodružné</li>
                    <li>Sci-fi</li>
                </ul>
            </li>
        </ul>


        <script type="text/javascript" src="jquery.js"></script>
        <script>
            $('#seznam > li').addClass('special');
        </script>

    </body>
</html>


 V uvedeném případě se pomocí  '>' filtruje jen první potomek 'li' ale dál nevím. Dále mě zaráží, že pokud ve <style> nezadám barvu 'li', třída .special se přiřadí celému seznamu. Jsem si vědom, že se jedná o naprosté základy a proto bych si je rád ujasnil, díky moc za rady.

Nahlásit jako SPAM
IP: 89.176.145.–
Reklama
Reklama
Flu0
Návštěvník
16. 10. 2013   #2
-
0
-

#1 martas36
Ahoj nejdřív k vybrání té druhé úrovně: Postup máš dobře, jen jsi ho nedokončil - selektor $('#seznam > li > ul') ti vybere ty druhé úrovně. Doslova vybere každé ul, které je přímým potomkem li, které je přímím potomkem #seznam. A protože třetí úroveň už není přímým potomkem toho li, tak ji to vynechá.

Tvůj problém se style: Je potřeba si uvědomit, že v css funguje dědičnost. Pokud nenastavíš barvu pro li, přebere si barvu od nadřazených - v tém případě od li.special.

Pro kontrolu jestli ti JS dává třídy správně doporučuju využít nástroje pro vývojáře, konkrétně průzkumníka, který ti zobrazí html i s úpravami přes javascript. (Dneska na to téma vyšel článek.)

Nahlásit jako SPAM
IP: 93.157.132.–
martas36
~ Anonymní uživatel
2 příspěvky
16. 10. 2013   #3
-
0
-

#2 Flu
Díky moc, už to chápu, zkoušel jsem to aplikovat a aby to fungovalo přesně tak jak má, tak se ten selektor ještě musí doplnit o druhou úroveň li, kterou chci změnit:  $('#seznam > li > ul > li'). Článek super, díky.

Nahlásit jako SPAM
IP: 89.103.130.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 16 hostů

Podobná vlákna

JQuery UI — založil Yety

Jquery v jquery — založil tribalcz

JQuery — založil janik366

JQuery zooming — založil tanned88

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý