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

我有一个页面，其中新创建的选择附加到列表与一些ajax代码，所以用户不必刷新整个页面。该列表包含2列，其中右侧的列必须具有称为“结束”的css类，它确保它向右浮动并且填充在右侧也为零。如何循环使用ajax追加奇数和偶数？

问题是，当添加一个新选项时，如果循环函数应该起作用，那么呈现的部分将显示多个选择。

请参阅下面的代码，并告诉我如果您对如何更改代码有任何建议，以便部分插入正确的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>

编辑：

我尝试了下面这似乎工作，但也似乎有点哈克..任何人更顺畅的解决方案？

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

来源

2012-10-20 Twiddr

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

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

这不会在IE8的工作，但它会在几乎所有其他的主流浏览器，而且你不必特定的类写的元素，以获得正确的行为。 nth-child选择器只适用于每个奇数元素。

来源

2012-10-20 08:22:46

看到这是非常聪明的，但真的想找到一个解决方案，IE浏览器可以处理..在IE9的方式工作吗？ – Twiddr

它在IE9中运行得很好。查看http://stackoverflow.com/questions/8492121/ie8-nth-child-and-before IE8 hackaround。 http://selectivizr.com/也是IE6-8的一个polyfill。 –

谢谢..不知道那个.. – Twiddr

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

回答

相关问题