Question

我有一个延伸到多行的管道列表。使用jquery如何删除每行第一个元素的列表分隔符。

喜欢这样：

红色|绿色|蓝色

紫色|黑色|白

紫罗兰|黄色|品红

到目前为止，我有这个（来自stackoverflow的答案）：

的jQuery ：

  var maxWidth = 350, // Your div max-width
    totalWidth = 0;
  $('#footer .right .links ul li').each(function(){
      var currentWidth = $(this).outerWidth(),
          nextWidth = $(this).next().outerWidth();
      totalWidth += currentWidth;
      if ( (totalWidth + nextWidth) > maxWidth ) {
          $(this).css('border-left', 'none');
          totalWidth = 0;
      }
  });

CSS ：

#footer .right .links {
  float:left;
  width: 350px;
    border:1px solid green;
}
#footer .right .links ul {
  margin:0;
  padding:0;
  text-align:right;
}
#footer .right .links ul li {
    display: inline-block;
  list-style-type:none;
  margin: 0 0 2px 0;
    font-size: 12px;
    padding:0 5px 0 7px;
    border-left:1px solid #7d7d7d;
}
#footer .right .links ul li:first-child {
    padding-left:0;
    border-left:none;
}

HTML：

<ul>
<li><a href="">Red</a></li>
<li><a href="">Green</a></li>
<li><a href="">Yellow</a></li>
....
</ul>

编辑（基于Faust答案的解决方案）： 用户Faust有正确答案，但必须稍微调整一下。所有元素的左偏移量为：

720 763 830 900 703 776 854 944

如您所见，每行第一个元素的左偏移量不是0.我注意到每行第一个元素的左偏移量小于前一个元素的左偏移量。

这是经过调整的jquery：

  $('#footer .right .links > ul li').each(function(){
      var $thisLi = $(this);
      var offset_left = $thisLi.position().left;
      if ($thisLi.prev().position()) {
        var offest_prev_left = $thisLi.prev().position().left;
      } else {
        var offest_prev_left = 0;
      }
      $('#test').append(offset_left + ' ');
      if(offset_left < offest_prev_left){
        $thisLi.css('border-left', 'none')
      }
  });

Answer 1

使用jQuery的position()从父容器的网格中获取偏移量，然后如果左偏移量为0，则表示它已被包裹到下一行：

<击>

$('#footer .right .links ul li').each(function(){
    var $thisLi = $(this);
    var offset = $thisLi.position();
    if(offset.left == 0){
        $thisLi.css('border-left', 'none')
    }
});

<击>

更新现在，我可以从您的小提琴中看到您正在将项目对齐到右边（抱歉，没有从您的CSS中捕捉到这些内容）。您应该在列表项而不是border-left上使用border-right。我还注意到哪个项应该作为偏移容器（具有links类的div），并且应用position：relative，以便position()将相对于该div的坐标。 / p>

这是我修改后的代码：

$(document).ready(function() {  
    var $container = $('#footer .right .links');

    $('#footer .right .links ul li').each(function(){
    var $thisLi = $(this);
    var offset = $thisLi.position();

    if(offset.left >= $container.width() - $thisLi.outerWidth()){
        $thisLi.css('border-right', 'none')
    }
    });
});

这是一个修改过的小提琴，显示它有效。：

http://jsfiddle.net/j7LKW/2/

请注意，我在CSS中更改了几行：

我将position:relative添加到#footer .right .links
和将边界声明从border-left更改为border-right 在#footer .right .links ul li

Answer 2

var entries = "Red | Green | Blue | Purple | Orange ....";
var colors = entries.split(" | ");
var firstL = colors.shift();

Answer 3

你不用什么

#footer .right .links ul li:first-child
{ 
    border-left: none;
}

#footer .right .links ul li:last-child
{ 
    border-right: none;
}

如何删除行上第一个列表项的管道分隔符？

3 个答案: