如何在 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

此答案是针对旧版问题编写的，不再正确。

最好的解决方案是为所有这些元素添加一个类，并使用它而不是 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 2

如果您使用数据属性，那么 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 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/