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完成迭代所有这些元素的工作。

例如，为所有元素#bokautbildning n 提供类.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/

如何在jQuery中创建一个循环，以便在我的div的末尾添加一个数字？

3 个答案: