Как динамически добавить свернуть класс в несколько div одного и того же класса, используя jquery - PullRequest
Новая
       10

Как динамически добавить свернуть класс в несколько div одного и того же класса, используя jquery

0 голосов
/ 22 апреля 2020

У меня есть страница с несколькими элементами div одного и того же класса, я хочу динамически добавлять классы свертывания для всех элементов div.

my 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>

my 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);
}

Но это не работает, так как я хочу добавить классы collpaseOne1, collpaseOne2, collpaseOne3 для div, но он добавляет collpaseOne3 для всех div.

Ответы [ 2 ]

0 голосов
/ 22 апреля 2020

как то так 

$(function(){


  const $sections = $('.section-title')
  
  for (let i = 0; i< $sections.length; i++){
  
    const $section = $sections.eq(i)
    const $sectionText = $section.next()
    
    $section.text(`Section ${i}`)
    $sectionText.text(`Section Text ${i}`)
    
    const targetId = `section_${i}`
    $sectionText.attr('id',targetId)
    $sectionText.addClass('collapse')
   
    $section.attr('data-toggle','collapse')
    $section.attr('data-target',`#${targetId}`)

  }

})
.section-title{
  font-weight:bold;
  cursor:pointer;
  padding:.5em;
}

.section-text{
   padding:.5em;
   margin-bottom:1em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<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>
0 голосов
/ 22 апреля 2020

Это потому, что вы нацеливаетесь на всех один раз, необходимо выполнить действие отдельно 

$(".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
  })
});
...