如何在jQuery中創建循環，以便將數字添加到我的div的末尾？

Question

我希望div id和div類中的數字循環，並且從0到我擁有的許多div。我該如何實現？我試圖把它放在一個for循環，但它並不適用於某些原因..

$("#bokautbildning0").hide(); 
$(".boka_btn0").click(function(){ 
     $("#bokautbildning0").slideToggle(); 
     var scrollToId = $(this).attr('href'); 
     $('html, body').animate({ 
      scrollTop: $(scrollToId).offset().top - 270 
     }, 500); 
     return false; 
    }); 


$("#bokautbildning1").hide(); 
$(".boka_btn1").click(function(){ 
     $("#bokautbildning1").slideToggle(); 
     var scrollToId = $(this).attr('href'); 
     $('html, body').animate({ 
      scrollTop: $(scrollToId).offset().top - 270 
     }, 500); 
     return false; 
    }); 


$("#bokautbildning2").hide(); 
$(".boka_btn2").click(function(){ 
     $("#bokautbildning2").slideToggle(); 
     var scrollToId = $(this).attr('href'); 
     $('html, body').animate({ 
      scrollTop: $(scrollToId).offset().top - 270 
     }, 500); 
     return false; 
    }); 

下面是與迴路我試過代碼：

for (var i = 0; i < 5; i++) { 
    $("#bokautbildning" + i).hide(); 
    $(".boka_btn" + i).click(function(){ 
     $("#bokautbildning" + i).slideToggle(); 
     var scrollToId = $(this).attr('href'); 
     $('html, body').animate({ 
      scrollTop: $(scrollToId).offset().top - 270 
     }, 500); 
     return false; 
    }); 
    } 

Answer 1

，如果你利用了數據屬性的jQuery的因爲這將是非常簡單的。即：

HTML示例：

<div data-number="1"></div> 
<div data-number="2"></div> 
<div data-number="3"></div> 
<div data-number="4"></div> 
<div data-number="5"></div> 

的jQuery：

$("div[data-number]").each(function() { 
    var number = $(this).data("number"); 
    $(this).html(number); 
    alert(number); 
}) 

要看到它在行動：

http://jsfiddle.net/uubxj55r/

Answer 2

這個答案寫對於舊版本的問題，不再正確。

最好的解決方案是將一個類添加到所有這些元素，並使用它來代替ID來運行jQuery。讓jQuery做這個工作來遍歷所有這些元素。

例如，給所有元素#bokautbildningn類.bokautbildning，改變你的JavaScript代碼如下：

$('.bokautbildning').hide(); 

$('.boka_btn1').click(function(){ 
    $('.bokautbildning').slideToggle(); 

    var scrollToId = $(this).attr('href'); 
    $('html, body').animate({ 
     scrollTop: $(scrollToId).offset().top - 270 
    }, 500); 

    return false; 
}); 

Answer 3

您需要使用Each和公正使確保每個部分中的所有項目都具有相同的類別。沒有必要使用您當前使用的編號系統。

$('.MyDivs').each(function(index){ //Loop through all the elements with class of 'MyDivs' 
    var thisElement = $(this); //get the current element we're on in the loop 
    thisElement.find('.bokautbildning').slideToggle(); //Find the element with class 'bokautbildning' within the current element in the loop and slideToggle it 
    thisElement.find('.boka_btn').click(function() { //Find the element with classs 'boka_btn' within the current element in the loop and add a click listener 
     //Code for click event happens here 
    }); 
} 

下面是一個例子：http://jsfiddle.net/o85tk0s3/