javascript - 使用ajax追加时如何循环奇数和偶数？

Question

我有一个页面，其中新创建的 Choices 使用一些 ajax 代码 append 到列表中，因此用户不必刷新整个页面。该列表包含 2 列，其中右侧的列必须有一个名为“ending”的 css 类，这确保它向右浮动并且右侧的填充也为零。

问题是，当 append 一个新的 Choice 时，如果循环函数应该工作，则呈现的部分正在检查多个 Choices。

请查看下面我的代码，如果您对如何更改代码有任何建议，请告诉我，以便部分插入正确的 css 类。

部分:

<% @tickets.each do |choice| %>
    <div id="<%= choice.id %>" class="<%= cycle("ticket shadow", "ticket shadow ending") %>" data-time="<%= choice.created_at.to_i %>">
<% end %>

View 中的 AJAX

<script type="text/javascript">
    var pusher = new Pusher('<%= Pusher.key %>'); // Replace with your app key
    var channel = pusher.subscribe('choices');

    channel.bind('created', function(data) {
        var after = $('.ticket:last').attr('data-time');

        var settings = { after: after}
        $.ajax({
            url: '/Home/Index',
            type: 'POST',
            dataType: 'json',
            data: settings,
            success: function (data) {
                $("#tickets").append(data.html);
                }
          });
        }

    );
</script>

编辑:

我尝试了下面的方法，这似乎有效，但也似乎有点老套。有人有更流畅的解决方案吗？

if (css_end == "ticket shadow") {
  $(".ticket:last").addClass("ending");
}

Answer 1

根据您的目标浏览器设置，我建议使用 CSS3 查询来定位所有其他元素。

.ticket:nth-child(2n+1) {
  float: right;
  padding-right: 0;
}

这在 IE8 中不起作用，但它在几乎所有其他主要浏览器中都起作用，而且您不必为元素编写特定的类来获得正确的行为。 nth-child 选择器将简单地应用于每个奇数元素。