동일한 클래스의 여러 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을 추가하고 있기 때문에 작동하지 않습니다.
이 같은
$(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> 이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다