0

我有一个延伸到多行的管道列表。使用 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>

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

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')
      }
  });
4

3 回答 3

1

使用 jQueryposition()从父容器的网格中获取偏移量，然后如果左偏移量为 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-right 而不是border-left。我还注意到哪个项目应该充当偏移容器（带有links类的 div），并应用了 position: relative，所以这position()将是相对于该 div 的坐标。

这是我修改后的代码：

$(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 in#footer .right .links ul li
于 2013-07-17T11:47:31.800 回答
0 
var entries = "Red | Green | Blue | Purple | Orange ....";
var colors = entries.split(" | ");
var firstL = colors.shift();
于 2013-07-17T11:37:00.773 回答
0

你不只是用什么

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

#footer .right .links ul li:last-child
{ 
    border-right: none;
}
于 2013-07-17T11:42:19.423 回答