1

我在压缩面包屑时遇到问题。如果面包屑到达许多元素，并且跨越多行，我希望一些起始元素被压缩（“...”）。

前 1

var height = $('#breadcrumbsContainer > span').height();
var length = $('#breadcrumbsContainer > span span').length;

while (height > 17) {

 for (var j = 1; j < length; j++) {
    if ($('#breadcrumbsContainer > span').get(j).find('a').text() != "...") {
        if ($('#breadcrumbsContainer > span').get(j).find('a').text("..."));
    }
    j++;
 }
};

前 2

var height = $('#breadcrumbsContainer > span').height();
var length = $('#breadcrumbsContainer > span span').length;

while (height > 17) {

for (var j = 1; j < length; j++) {
    if ($('#breadcrumbsContainer > span:eq(j) a').text() != "...") {
        if ($('#breadcrumbsContainer > span:eq(j) a').text("..."));
    }
    j++;
}

};

在 for 循环中不使用 ".get(j)" 或 :eq(j) 的情况下，一切都很好。每次我运行代码时，它似乎都需要第一个元素，而不是 (j = 1 ) 的第二个元素。（我不想压缩根节点）

jsFiddle 示例：http: //jsfiddle.net/TPqfK/3/

4

1 回答 1

1

替代解决方案：我的原始答案仍在下方，但我正在考虑如何以不同的方式执行此操作，因此创建了以下代码的演示，其中更改BREADCRUMBS_MAX_WIDTH为更大或更小的值将允许或多或少的省略和更改.last()to.first()将使更高级别的面包屑首先被省略:-)

JavaScript（需要 jQuery）

var BREADCRUMBS_MAX_WIDTH = 700;

function crumbsWidth() {
  var width = 0;
  $('#breadcrumbs li').each(function() {
    width += $(this).outerWidth();
  });
  return width;
}

while (crumbsWidth() >= BREADCRUMBS_MAX_WIDTH && $('#breadcrumbs li').length - 2 !== $('#breadcrumbs li.ellipsis').length) {
  $('#breadcrumbs li:not(:first-child):not(:last-child):not(.ellipsis)').last().addClass('ellipsis');
}

CSS

#breadcrumbs {
  margin:0;
  padding:0;
  list-style-type:none;
  font-size:0;
}
#breadcrumbs li {
  display:inline-block;
  font-size:16px;
  padding-left:4px;
}
#breadcrumbs li:not(:first-child):before {
  content:'\002192  ';
}
.ellipsis {
  width:60px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

HTML

<ul id="breadcrumbs">
  <li>Lorem ipsum dolor</li>
  <li>sit amet, consectetur</li>
  <li>adipisicing elit, sed</li>
  <li>do eiusmod tempor</li>
  <li>incididunt ut labore</li>
  <li>et dolore magna aliqua</li>
  <li>Ut enim ad minim</li>
</ul>

原答案：

最初，在添加小提琴之前，我在运行代码时遇到了一些问题，我将首先介绍。

while (height > 17)控制流语句可能导致无限循环，这可能导致 100% CPU 并可能导致浏览器或选项卡崩溃。我在小提琴中看到您提供了一种跳出循环的方法，但是问题中的代码应该真正完整地描述了问题。

存在一个选择器问题，$('#breadcrumbsContainer > span')因为您使用的是 CSS Child 组合>器，它只返回直接子代而不是所有后代。在您的小提琴中使用此标记：

  <div id="breadcrumbsContainer">
    <span id="ctl00_breadcrumb">
      <span><a style="text-decoration: none;" href="#">Min startside</a></span>
      <span></span>
      <span><a style="text-decoration: none;" href="#">dfa as dfdsa dsa fdsfas</a></span>
      <span></span>
      <span><a style="text-decoration: none;" href="#">a fdsa fsd adsfdsasad fdsa</a></span>
      <span></span>
      <span><a style="text-decoration: none;" href="#">test aff for log og opr sds</a></span>
      <span></span>
      <span><a style="text-decoration: none;" href="#">TESTs sds</a></span>
      <span></span>
      <span>anders er awesome</span>
    </span>
  </div>​

选择器正在查找<span id="ctl00_breadcrumb">而不是面包屑跨度。所以你可能需要纠正它$('#breadcrumbsContainer span span')

这仍然无法解决问题，因为 using$('#breadcrumbsContainer span span').get(j)会导致 JavaScript 错误，因为.get()返回的是 DOM 元素而不是 jQuery 包装的对象，因此您无法调用.find()它。

使用第二个示例:eq()也将不起作用，因为j变量是选择器字符串的一部分，而不是变量值，并且不会在 jQuery 中导致错误。所以，

$('#breadcrumbsContainer > span:eq(j) a')

应该

$('#breadcrumbsContainer > span:eq(' + j + ') a')

然而，随着所有这些变化，由于操作方式的原因，生成的选择器仍然无法工作:eq()。从文档

:eq 过滤与前面的表达式匹配的元素集

所以$('#breadcrumbsContainer span span')将选择所有面包屑和间隔元素，然后应用过滤器。所以:eq(0)将是第一个面包屑和:eq(1)第一个间隔跨度。

因此，采取所有这些更改，我们最终得到：

for (var j = 2; j < length; j++) { // <--- starts at 2 (do not change first breadcrumb)
    if ($('#breadcrumbsContainer span span:eq(' + j + ') a').text() != "...") {
       if ($('#breadcrumbsContainer span span:eq(' + j + ') a').text("..."));
    }
    j++;
}

注意：上面的循环可以工作，但效率不高，原因如下：

  1. <span>可以删除填充面包屑的空元素，以便使用 CSS 分隔每个面包屑
  2. <ul><li></li></ul>例如，使用更多语义标记来描述数据
  3. 选择:eq()器是 jQuery 扩展，不是 CSS 规范的一部分，使用 :eq() 的查询无法利用原生 DOM querySelectorAll() 方法提供的性能提升[docs]
  4. 使用广泛支持的CSS 属性text-overflow:ellipsis并更改每个面包屑的宽度可能比更改<a>文本更简单。
于 2012-11-05T12:30:04.573 回答