我建議在不同的容器包裝他們(我敢肯定,他們已經裹着的東西,但出於演示的目的,我想確保它)。一旦做到這一點,如下圖所示:
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++;
});
這兩種方法都有其小的優點/缺點,但在這個尺度上,它純粹是一種設計選擇。
這是簡短而優雅的解決方案,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