Javascript 将类添加到奇数表类和偶数表类，使它们左右浮动

我看了一些关于这个问题的答案，但我已经尝试了一些，不能让它工作

我该如何为每个表添加一个类来分隔奇数表和偶数表，我尝试了这个方法，但无法使其工作

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

$（文档）.ready（函数（）{
$（'.leaguehistorymodule:odd'）.addClass（“左栏”）；
$（'.leaguehistorymodule:偶数'）.addClass（“列右”）；
});

下面是当前的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>

我希望在脚本运行后，HTML就是这样

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

侧注

• ：偶数

  将选择索引为0,2,4的元素。。n

• ：奇数

  将选择索引为1,3,5的元素。。n

试试看

---

使用：odd/：偶数选择器时，它对基于0的索引起作用，因此第一个元素将是偶数元素，第二个元素将是奇数元素，因为它们的索引分别为0和1

我建议使用：nth-child（）选择器来利用本机选择器支持

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

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