jQuery Each ciklus használata

Sok esetben megtőrténhetett már (ha még nem akkor valószínűleg meg fog), hogy olyan dolgot kellett végrehajtanunk amelyhez szükségünk volt egy javascriptre, annak érdekében, hogy az oldalon található elemek közül néhányon egyesével kellett végre hajtsunk valami műveletet.

Leggyakoribb ilyen eset, amikor az oldalon található egy lista vagy táblázat, melynek minden eleméhez tartozik egy checkbox.

Ha van egy ilyen listánk, akkor ezzel a listával rengeteg műveletet ki lehet találni, pl:
annak függvényében, hogy a checkbox be van pipálva vagy nincs, a sort be kell színezni valamilyen színnel. Ha be van pipálva halvány zöld, ha nincs, akkor halvány szürke.

Vegyük az alábbi táblázatot:

    <table class="example-table-result">
        <tr>
            <th> </th>
            <th>Név</th>
        </tr>
        <tr>
            <td>
                <input type="checkbox" value="1" />
            </td>
            <td>Név 1</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" value="1" checked="checked" />
            </td>
            <td>Név 2</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" value="1" />
            </td>
            <td>Név 3</td>
        </tr>
    </table>

                    

Ebben a táblázatban 2 féle képpen tudjuk színezni a sorokat:

1. PHP segítségével, amikor tesszük ki a sorokat, egyből színt adunk neki
2. Az oldal megjelnítése után javascript segítségével

Ebben az esetben minket a javascriptes változat érdekel.
Így:

1. Vesszük a táblázatban szereplő checkbox-okat egyesével
2. Megnézzük, hogy be van pipálva vagy nincs
3. Ha be van pipálva kiszínezzük a neki megfelelő sort

A kiszínezéshez a legegyszerűbb módszert választjuk, hozzáadunk egy osztályt amelyet már előre megírtunk CSS-ben, és az megadja a hozzá tartozó színt.

Az alábbi javascript segítségével végrehajtjuk a feladatot az előbbi sorrendben.

<script type="text/javascript">
    $( document ).ready(function(){

        $( '.example-table input[type="checkbox"]' ).each(function( index, element ){
            if( $( element ).is( ":checked" ) )
            {
                $( element ).parent().parent().addClass( "background-light-green" );
            }
            else
            {
                $( element ).parent().parent().addClass( "background-light-grey" );
            }
        });

    });
</script>

                

A javascript végrehajtása után az eredmény az alábbi táblázaton látható:
 

A példa és a benne szereplő kódok letölthetőek a jobb oldalon található link segítségével