JQuery selectors

Fórum › JavaScript, AJAX, jQuery

martas36

~ Anonymní uživatel
~ 2 příspěvky

15. 10. 2013 #1

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.–

Flu0

Návštěvník

16. 10. 2013 #2

#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

#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.–

← Zpět na seznam vláken ← Zpět do Fóra