动态删除最后一个右边界

Question

我使用了这个滑块，但有一个细节不符合我的愿望。

问题是我想要最后一个边框 - 右边不显示但是当我移动到滑块时我想更新它，所以我只得到最右边的边框没有显示。

我的意思是，例如这是第一张幻灯片：a|b|c|d|我希望a|b|c|d，然后当我点击右箭头时，我想获得b|c|d|a（没有最后一个边框“|” ）。

我希望我能很好地解释我的意思。）

http://jsfiddle.net/5AdgA/1/

Answer 1

我已更新您的JSFiddle here以显示其工作方式。

基本上，每次更新时，它都会将last-child类添加到：last li。它在jQuery中执行此操作而不使用CSS伪造选择器的原因纯粹是为了支持浏览器。如果您需要支持IE 6/7/8之类的浏览器，那么就可以这样做了

Answer 2

将您的border-right切换为border-left，然后切换为:first-child。您可以使用last-child，但IE8也支持first-child。

http://jsfiddle.net/amustill/5AdgA/6/

Answer 3

你可以这样做

$(document).ready(function() {
    $('#box_ul li:first').before($('#box_ul li:last')); 
    $('#box_ul li').css('border-right','1px solid #d5d5d5');
    $('#box_ul li:last').css('border-right','none');
   $('#right_scroll_clienti').click(function(){
       var item_width = $('#box_ul li').outerWidth() + 10;
       var left_indent = parseInt($('#box_ul').css('left')) - item_width;
       $('#box_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
            $('#box_ul li:last').after($('#box_ul li:first')); 
            $('#box_ul').css({'left' : '0px'});
           $('#box_ul li').css('border-right','1px solid #d5d5d5');
    $('#box_ul li:last').css('border-right','none');
       }); 

   });
   $('#left_scroll_clienti').click(function(){
       var item_width = $('#box_ul li').outerWidth() + 10;
       var left_indent = parseInt($('#box_ul').css('left')) + item_width;
       $('#box_ul:not(:animated)').animate({'left' : left_indent},500,function(){    
            $('#box_ul li:first').before($('#box_ul li:last')); 
            $('#box_ul').css({'left' : '0px'});
           $('#box_ul li').css('border-right','1px solid #d5d5d5');
    $('#box_ul li:last').css('border-right','none');
       });
    });
});​

DEMO

Answer 4

检查这是否满足您的需求：http://jsfiddle.net/5AdgA/9/

我刚刚更改了一些css属性并为ul

添加了一个div

  .slidewrapper{width:935px; overflow:hidden;} //added on css class for the slider and some little changes, not much.

Answer 5

这些是你的元素

 <ul id="box_ul">
   <li><a href="#">a</li>
   <li><a href="#">b</li>
   <li><a href="#">c</li>
   <li><a href="#">d</li>
</ul>

为了从最后一个元素中删除边框，您只需使用css，如下所示：

box_ul li：last-child {border-right：0}

请确保在以下位置放置此行（css规则）：#box ul li {}此样式规则

感谢。

Answer 6

#box ul li:last-of-type{
    border-right: 0;
}