首页 > 解决方案 > 如何使用jquery将折叠类动态添加到同一类的多个div

问题描述

我有一个包含多个相同类 div 的页面,我想为所有 div 动态添加折叠类。

我的 html :

<div class="section-title"></div>
<div class="section-text"></div>

<div class="section-title"></div>
<div class="section-text"></div> 

<div class="section-title"></div>
<div class="section-text"></div> 

我的jQuery:

var numItems = $('.section-title').length;

var i;
for(i='0';i<numItems;i++) {
    $(".section-title ").attr("data-toggle", "collapse");
    $(".section-title ").attr("data-target", "#collapseOne"+i);
    $(".section-text ").attr("data-toggle", "collapse");
    $(".section-text").attr("id", "collapseOne"+i);
}

但这不起作用,因为我想为 div 附加 collpaseOne1、collpaseOne2、collpaseOne3 类,但它正在为所有 div 附加 collpaseOne3。

标签: jquerytwitter-bootstrap-3

解决方案


那是因为您每次都针对所有一个,需要单独执行该操作

$(".section-title").each(function(i, element){
  $(this).attr({
    "data-toggle": "collapse",
    "data-target": "#collapseOne"+i
  })
});

$(".section-text").each(function(i, element){
  $(this).attr({
    "data-toggle": "collapse",
    "id": "collapseOne"+i
  })
});

推荐阅读