jQuery for-loop與：eq/get - compress breadcrumb

Question

我遇到了壓縮麪包屑的問題。如果麪包屑到達許多元素，並跨越多行，我希望一些啓動元素被壓縮（「...」）。

前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 = ）。 （我不想壓縮根節點）

的jsfiddle例如：http://jsfiddle.net/TPqfK/3/

Answer 1

替代解決方案：我原來的答覆仍低於但我在想如何做到這一點在這樣造就了不同的方式下面的代碼，其中，改變BREADCRUMBS_MAX_WIDTH獲得較大或較小的值將允許的demo或多或少省略號-定義和改變.last()到.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> 

原來的答覆：

最初我已經運行一些問題的代碼BEF礦石小提琴被添加，我會先介紹。

控制流語句的while (height > 17)可能會導致無限循環，這可能導致100％的CPU並可能導致瀏覽器或選項卡崩潰。我在小提琴中看到，你提供了一種突破循環的方法，但是問題中的代碼應該完全描述問題。

$('#breadcrumbsContainer > span')有一個選擇器問題，因爲您正在使用CSS子組合器>，它只返回直接子元素而不是所有子元素。有了這個標記在你的提琴：

<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')

這仍然不會解決問題，因爲使用$('#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規範的一部分，使用查詢：當量（）不能利用由本機DOM querySelectorAll提供的性能提升的（）方法^[docs]
4. 可能是更簡單地使用widely supported CSS屬性text-overflow:ellipsis並更改每個麪包屑的寬度而不是更改<a>文本。