Javascript jQuery for循环：eq/get-compressbreadcrumb

我压缩面包屑有问题。如果面包屑到达多个元素，并且跨越多行，我希望一些开始元素得到压缩

例1

例2

})

在for循环中，如果不使用.getj或：eqj，一切都会运行良好。每次我运行代码时，它似乎都使用第一个元素，而不是j=1的第二个元素。我不想压缩根节点

JSFIDLE示例：

替代解决方案：我的原始答案仍在下面，但我正在考虑如何以不同的方式执行此操作，因此创建了以下代码的，其中，将面包屑最大宽度更改为较大或较小的值将允许或多或少的省略号化和更改。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

HTML

选择器正在查找而不是面包屑跨距。因此，您可能需要将其更正为$'breadcrumbsContainer span'

这仍然无法解决问题，因为使用$'breadcrumbsContainer span'.getj将导致JavaScript错误，因为返回的是DOM元素，而不是jQuery包装的对象，因此无法对其调用.find

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

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

应该是

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

但是，由于：eq的工作方式，所有这些更改都会导致结果选择器仍然无法工作。从文件中

：eq筛选与前面的表达式匹配的元素集

因此$'breadcrumbsContainer span'将选择所有的面包屑和间隔元素，然后应用过滤器。因此：eq0将是第一个面包屑，而：eq1将是第一个间隔棒跨距

因此，考虑到所有这些变化，我们最终得出：

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++;
}

注意：上述循环将起作用，但由于以下原因，其效率不高：

可以删除填充面包屑的空元素，以便使用CSS分隔每个面包屑 例如，使用更多的语义标记来描述数据 ：eq选择器是jQuery扩展，不是CSS规范的一部分，使用：eq的查询无法利用本机DOM querySelectorAll方法提供的性能提升 使用CSS属性text overflow可能更简单：省略号和更改每个面包屑的宽度，而不是更改文本。 替代解决方案：我的原始答案仍在下面，但我正在考虑如何以不同的方式执行此操作，因此创建了以下代码的，其中，将面包屑最大宽度更改为较大或较小的值将允许或多或少的省略号化和更改。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

HTML

选择器正在查找而不是面包屑跨距。因此，您可能需要将其更正为$'breadcrumbsContainer span'

这仍然无法解决问题，因为使用$'breadcrumbsContainer span'.getj将导致JavaScript错误，因为返回的是DOM元素，而不是jQuery包装的对象，因此无法对其调用.find

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

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

应该是

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

但是，由于：eq的工作方式，所有这些更改都会导致结果选择器仍然无法工作。从文件中

：eq筛选与前面的表达式匹配的元素集

因此$'breadcrumbsContainer span'将选择所有的面包屑和间隔元素，然后应用过滤器。因此：eq0将是第一个面包屑，而：eq1将是第一个间隔棒跨距

因此，考虑到所有这些变化，我们最终得出：

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++;
}

注意：上述循环将起作用，但由于以下原因，其效率不高：

可以删除填充面包屑的空元素，以便使用CSS分隔每个面包屑 例如，使用更多的语义标记来描述数据 ：eq选择器是jQuery扩展，不是CSS规范的一部分，使用：eq的查询无法利用本机DOM querySelectorAll方法提供的性能提升 使用CSS属性text overflow可能更简单：省略号和更改每个面包屑的宽度，而不是更改文本。

---

你有一个可以分享的问题的工作示例吗？@andyb你有一个可以分享的问题的工作示例吗？@andyb根据原始答案结尾处的评论更新了我的答案，并根据结尾处的评论更新了我的答案原始人 最终答案

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++;
}