使用ajax追加时如何循环奇偶？

Question

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

问题是，当添加一个新的选项时，如果循环函数应该工作，则呈现的部分会出现多个选项。

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

部分：

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

视图中的 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>

编辑：

我尝试了以下方法，这似乎可行，但也似乎有点 hacky.. 有人有更流畅的解决方案吗？

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 选择器将简单地应用于每个奇数元素。