Question

看了一些这个问题的答案，但我已经尝试了一些，但是无法让它发挥作用。

我如何为每个表添加一个类来分隔奇数和偶数表，我试过这个但是不能让它工作

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

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

Answer 1

旁注，

:even将选择索引为0,2,4 ..
:odd将选择索引为1,3,5 .. n

尝试，

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

DEMO

Answer 2

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

我建议使用：nth-child（）选择器来使用原生选择器支持

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

将类添加到odd和even表类以左右浮动它们

2 个答案:

DEMO