Question

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

问题在于，当附加一个新的选择时，如果循环函数应该有效，那么渲染的部分就会出现多个选择。

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

PARTIAL：

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

编辑：

我尝试了以下，这似乎有效，但似乎有点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选择器将仅应用于每个奇数元素。

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

1 个答案: