Foreach元素並添加自定義數據jQuery？

我有這樣的HTML標記Foreach元素並添加自定義數據jQuery？

<div class="wizard-step"> 
<div class="wizard-step"> 
<div class="wizard-step"> 
<div class="wizard-step">

我必須改變HTML使用jQuery這個循環後，我得到這個標記

<div id="wizard-step-1" class="wizard-step tab-pane fade in active" data-step="1"> 
<div id="wizard-step-2" class="wizard-step tab-pane fade" data-step="2"> 
<div id="wizard-step-3" class="wizard-step tab-pane fade" data-step="3"> 
<div id="wizard-step-4" class="wizard-step tab-pane fade" data-step="4">

工作撥弄 http://jsfiddle.net/brainbolt/52VtD/4/

來源

2014-11-22 Miomir Dancevic

簡潔地說，用jQuery：

$('.wizard-step').each(function(k,v) { 
    var classToAdd = 'tab-pane fade'; 
    if (k === 0) { 
     classToAdd += ' in active'; 
    } 
    $(v).prop('id', 'wizard-step-' + (k+1)).addClass(classToAdd).attr('data-step', (k+1));  
});

Fiddle

來源

2014-11-22 20:28:09 Tomanow

這是簡短而優雅的解決方案，txanks – 2014-11-22 20:33:44

@Gorostas的確的確如此。但我仍然不明白你爲什麼沒有自己嘗試任何東西。 – Regent 2014-11-22 20:34:15

我已經添加了工作小提琴，但我很擅長Bootstrap和CSS，html，jquery是我正在學習的東西@Tomanow，你能幫我多一點，我不寫另一個問題，如果我有一些其他元素活動已經，請看看這個小提琴http://jsfiddle.net/52VtD/9212/ – 2014-11-22 20:38:31

有一個在jQuery的功能，良好的研究所謂的.each()可以在這裏閱讀。

http://api.jquery.com/each/

你會發現是，回調函數傳遞兩個參數。第一個是循環索引，第二個是元素。例如

$(".wizard-step").each(function(index, element) { 
    if(index==0) { 
     // Do something for first 
    } else { 
     // Do something for others 
    } 
});

來源

2014-11-22 20:28:06 Kolban

我建議在不同的容器包裝他們（我敢肯定，他們已經裹着的東西，但出於演示的目的，我想確保它）。一旦做到這一點，如下圖所示：

HTML代碼

<div class="wizard-container"> 
    <div class="wizard-step"></div> 
    <div class="wizard-step"></div> 
    <div class="wizard-step"></div> 
    <div class="wizard-step"></div> 
</div>

...所有你需要做的就是讓.wizard-container .wizard-step元素用簡單的jQuery選擇：

Javascript代碼

var wsteps = $('.wizard-container .wizard-step');

一旦我們有了這些元素，我們只需要t o迭代它們。對於這種既可以使用for週期：

Javascript代碼

for (var i = 1; i <= wsteps.length; i++) 
{ 
    wsteps[i].attr('data-step', i); 
    // HTML5 browsers will support: 
    // wsteps[i].data('step', i); 

    wsteps[i].addClass('wizard-step'); 
    wsteps[i].addClass('tab-pane'); 
    wsteps[i].addClass('fade'); 

    if (i == 1) 
    { 
     wsteps[i].addClass('in'); 
     wsteps[i].addClass('active'); 
    } 
}

或使用jQuery的內置.each()，這是特別爲迭代通過一個jQuery返回一組元素的選擇設計：

Javascript代碼

var n = 1; 
wsteps.each(function() { 
wsteps[i].attr('data-step', n); 
    // HTML5 browsers will support: 
    // wsteps[n].data('step', n); 

    wsteps[n].addClass('wizard-step'); 
    wsteps[n].addClass('tab-pane'); 
    wsteps[n].addClass('fade'); 

    if (n == 1) 
    { 
     wsteps[n].addClass('in'); 
     wsteps[n].addClass('active'); 
    } 
    n++; 
});

這兩種方法都有其小的優點/缺點，但在這個尺度上，它純粹是一種設計選擇。

來源

2014-11-22 20:28:27

這工作非常感謝 – 2014-11-22 20:34:00

Foreach元素並添加自定義數據jQuery？

回答

相關問題