CODEWITHSUNDEEP
javascriptjquery
MShack
MShack

Reputation: 652

Add class to odd and even table class to float them left and right

Looked at some answers for this question but i have tried a few and cant get it working.

How would i add a class to each to separate odd and even tables , i tried this but cant get it working

<script type="text/javascript">
    $(document).ready(function () {
$('.leaguehistorymodule:odd').addClass("column-left");
$('.leaguehistorymodule:even').addClass("column-right");
});
</script>

Here is the current HTML

<div id="mfl-singlegame">
    <div id="HPG" class="leaguehistorymodule"></div>
    <div id="LPG" class="leaguehistorymodule"></div>
    <div id="LPIW" class="leaguehistorymodule"></div>
    <div id="HPIL" class="leaguehistorymodule"></div>
    <div id="HCOMB" class="leaguehistorymodule"></div>
    <div id="LCOMB" class="leaguehistorymodule"></div>
    <div id="WINMARGIN" class="leaguehistorymodule"></div>
    <div id="LOWMARGIN" class="leaguehistorymodule"></div>
</div>

I want the HTML to be this after script runs

<div id="mfl-singlegame">
    <div id="HPG" class="leaguehistorymodule column-left"></div>
    <div id="LPG" class="leaguehistorymodule column-right"></div>
    <div id="LPIW" class="leaguehistorymodule column-left"></div>
    <div id="HPIL" class="leaguehistorymodule column-right"></div>
    <div id="HCOMB" class="leaguehistorymodule column-left"></div>
    <div id="LCOMB" class="leaguehistorymodule column-right"></div>
    <div id="WINMARGIN" class="leaguehistorymodule column-left"></div>
    <div id="LOWMARGIN" class="leaguehistorymodule column-right"></div>
</div>

Upvotes: 2

Views: 280

Answers (2)

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Side note,

  • :even will select the elements with index 0,2,4 .. n

  • :odd will select the elements with index 1,3,5 .. n

Try,

$('.leaguehistorymodule:even').addClass("column-left");
$('.leaguehistorymodule:odd').addClass("column-right");

DEMO

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388316

When you use :odd/:even selectors, it works on 0 based indexes so the first element will be an even element and the second will be odd one because their indexes are 0 and 1 respectively.

I would recommend using :nth-child() selector to make use of native selector support

$(document).ready(function () {
    $('.leaguehistorymodule:nth-child(odd)').addClass("column-left");
    $('.leaguehistorymodule:nth-child(even)').addClass("column-right");
});

Upvotes: 1

Related Questions