jQuery/Javascript將數字標識添加到兩個元素與一個for循環

我使用Bootstrap來創建選項卡，當單擊一個樹視圖中的鏈接。在單擊打開的每個選項卡內，還有兩個名爲Query Builder和Dimension Builder的其他選項卡。下面是對旅途中創建使用jQuery的標記（只是其中的一部分）：jQuery/Javascript將數字標識添加到兩個元素與一個for循環

<div class="tab-pane active" id="1" role"tabpanel"> 
    <ul class="nav nav-tabs query-dimension-tabs" role="tablist"> 
     <li role="presentation" class="active"> 
      <a role="tab" data-toggle="tab" href="#tab0" aria-controls="tab0">Query Builder</a> 
     </li> 
     <li role="presentation"> 
      <a role="tab" data-toggle="tab" href="#tab1" aria-controls="tab1">Dimension Builder</a> 
     </li> 
    </ul> 
    <div class="tab-content"></div> 
</div> 
<div class="tab-pane" id="2" role"tabpanel"> 
    <ul class="nav nav-tabs query-dimension-tabs" role="tablist"> 
     <li role="presentation" class="active"> 
      <a role="tab" data-toggle="tab" href="#tab1" aria-controls="tab1">Query Builder</a> 
     </li> 
     <li role="presentation"> 
      <a role="tab" data-toggle="tab" href="#tab2" aria-controls="tab2">Dimension Builder</a> 
     </li> 
    </ul> 
    <div class="tab-content"></div> 
</div>

爲了能有我的表現形式，一種爲查詢生成器，一個用於維度構建，這些選項卡中，並保持每個窗體。每個選項卡內的每個選項卡中的其他選項都是獨一無二的，所有這些<a>標籤都需要具有唯一的href和aria-controls屬性，即最終的數字必須是唯一的。所以第一個<a>標籤需要編號爲0，接下來的編號爲1,2,3,4 ....等等。

我正在使用for循環遍歷存在的所有<ul>，我試圖設置每個<ul>中兩個<a>標籤的編號。下面是for循環：

var contentUl = firstContentDiv.find(".query-dimension-tabs");  

    for (var i = 0; i < contentUl.length; i++) {  
     var qId = i; 
     var dId = i + 1;   

     qA.href = "#tab" + qId; 
     qA.setAttribute("aria-controls", "tab" + qId); 
     dA.href = "#tab" + dId; 
     dA.setAttribute("aria-controls", "tab" + dId); 
    }

我已經嘗試了許多不同的計算，但我總是0 1 1 2 2 3結束了，但我想有它0 1 2 3 4 5 ... .to有多少標籤有這兩個標籤。

這是可能的一些計算？

這裏是標籤的照片時，兩個鏈接已被點擊：

來源

2016-07-29 Margret Kristjansdottir

將i ++替換爲i = i + 2 –

您是否試圖查看第二個值來自哪裏？可能與斷點 –

試圖i = i + 2而不是i ++在for循環中，只是結束與tab0 tab1 tab0 tab1然後tab2 tab3 tab2 tab3 tab4 tab5 tab4 tab5 ...也許它是不可能有tab0 tab1 tab2 TAB3。如果它只是一個在for循環中需要唯一編號的元素，那很容易。 –

這應該爲你工作。

var qId = 0; 
$(".query-dimension-tabs a").each(function(){ 
    $(this).attr("href","#tab"+qId); 
    $(this).attr("aria-controls","tab"+qId); 
    ++qId; 
});

來源

2016-07-29 10:01:52 polamoros

這與我的解決方案完全相同，除了純jQuery，當然我應該使用它來代替jQuery和Javascript的混搭。這會給你tab0 tab1，tab1 tab2，tab2 tab3 ... –

編輯得到tab0，tab1，tab2 ... – polamoros

是的，這是它謝謝你：D ...當--qId被刪除它的作品如預期:) –

你真正需要做的是，而不是僅由一個遞增變量我中的價值循環，你需要增量它由兩個。

所以不是這個

for (var i = 0; i < contentUl.length; i++)

做這個

for (var i = 0; i < contentUl.length; i+=2)

這樣，每次你的循環開始，QID將獲得價值的時間得到我的0,2，4的值（，6等）和dId將獲得比i更大的值（1，3，5，7等）。因此，您將得到qId，dId對的值爲0 1，2 3，4 5等等。

因此，最終的for循環看起來像這樣：

for (var i = 0; i < contentUl.length; i+= 2) {  
    var qId = i; 
    var dId = i + 1;   

    qA.href = "#tab" + qId; 
    qA.setAttribute("aria-controls", "tab" + qId); 
    dA.href = "#tab" + dId; 
    dA.setAttribute("aria-controls", "tab" + dId); 
}

此外，如果你需要改變所有的同一類或ID元素的值，那麼你將不得不使用每個（）函數代替用於循環並使用$（this）.attr（）來更改它們的值，如由polamoros所述。

來源

2016-07-29 10:11:57

你忘了更改for循環它是一樣的我:) –

我意識到相同，只要我發佈答案，並因此立即糾正。現在檢查解決方案。 :) –

但是這不起作用我結束了0 1，0 1，2 3，2 3，4 5，4 5 ...它幾乎可以工作，但連續有兩個相同。 –

jQuery/Javascript將數字標識添加到兩個元素與一個for循環

回答

相關問題