jQuery/Javascript for 루프를 사용하여 두 요소에 숫자 ID 추가

Question

트 리뷰의 링크를 클릭하면 부트 스트랩을 사용하여 탭을 만듭니다. 클릭으로 열리는 각 탭에는 Query Builder 및 Dimension Builder라는 두 개의 다른 탭이 있습니다.

<div class="tab-pane active" id="1" role"tabpanel"> 
    <ul class="nav nav-tabs query-dimension-tabs" role="tablist"> 
     <li role="presentation" class="active"> 
      <a role="tab" data-toggle="tab" href="#tab0" aria-controls="tab0">Query Builder</a> 
     </li> 
     <li role="presentation"> 
      <a role="tab" data-toggle="tab" href="#tab1" aria-controls="tab1">Dimension Builder</a> 
     </li> 
    </ul> 
    <div class="tab-content"></div> 
</div> 
<div class="tab-pane" id="2" role"tabpanel"> 
    <ul class="nav nav-tabs query-dimension-tabs" role="tablist"> 
     <li role="presentation" class="active"> 
      <a role="tab" data-toggle="tab" href="#tab1" aria-controls="tab1">Query Builder</a> 
     </li> 
     <li role="presentation"> 
      <a role="tab" data-toggle="tab" href="#tab2" aria-controls="tab2">Dimension Builder</a> 
     </li> 
    </ul> 
    <div class="tab-content"></div> 
</div> 

이 탭에서 내 폼, 쿼리 빌더 다른 하나는 차원 작성기 하나가 각각의 형태를 유지 할 수 있도록 : 다음은 jQuery를 함께 이동 만들어지는 마크 업 (그것의 한 부분)입니다 각 탭 내의 각 탭에있는 고유 한 태그 중 하나 인 <a> 태그에는 고유 한 href 및 aria-controls 속성이 있어야합니다. 즉, 끝에있는 숫자는 고유해야합니다. 따라서 첫 번째 <a> 태그는 숫자 0, 다음 숫자 1, 2, 3, 4 .... 등이되어야합니다.

나는 모든 <ul>을 통해 루프를 사용하고 있으며 각 <ul>에 두 개의 <a> 태그에 대한 번호를 설정하려고합니다. 아래는 대한 루프는 다음과 같습니다

var contentUl = firstContentDiv.find(".query-dimension-tabs");  

    for (var i = 0; i < contentUl.length; i++) {  
     var qId = i; 
     var dId = i + 1;   

     qA.href = "#tab" + qId; 
     qA.setAttribute("aria-controls", "tab" + qId); 
     dA.href = "#tab" + dId; 
     dA.setAttribute("aria-controls", "tab" + dId); 
    } 

나는 여러 가지 계산을 해봤지만 항상 0 1 1 2 2 3 끝,하지만 난 그것을 0 1 2 3 4 5를 가지고 싶습니다 ... .이 두 탭이있는 탭이 얼마나 많이 있습니다.

일부 계산시 가능합니까? 여기

는 두 개의 링크가 클릭되었을 때 탭의 사진입니다 : 이것은 당신을 위해 일한다

Answer 1

. 당신이 정말로해야 할 일은

var qId = 0; 
$(".query-dimension-tabs a").each(function(){ 
    $(this).attr("href","#tab"+qId); 
    $(this).attr("aria-controls","tab"+qId); 
    ++qId; 
}); 

Answer 2

대신 하나에 의해 for 루프에서 변수 내가의 값을 증가, 당신은 두에 의해 증가 그것을 할 필요가 있다는 것입니다.

그래서 그 대신이

for (var i = 0; i < contentUl.length; i++) 

의이

for (var i = 0; i < contentUl.length; i+=2) 

이 방법을 수행, 루프 시작, QID 가치를 얻을 때마다 i 값 (0, 2, 4를 얻을 , 6 등) 및 dI wil은 i보다 큰 값 1을 얻습니다 (1, 3, 5, 7 등). 그러면 qId, dId 쌍의 값을 0 1, 2 3, 4 5 등과 같이 얻을 수 있습니다.

루프 그래서 최종는 다음과 같이 표시됩니다

for (var i = 0; i < contentUl.length; i+= 2) {  
    var qId = i; 
    var dId = i + 1;   

    qA.href = "#tab" + qId; 
    qA.setAttribute("aria-controls", "tab" + qId); 
    dA.href = "#tab" + dId; 
    dA.setAttribute("aria-controls", "tab" + dId); 
} 

을 또한 당신이 같은 클래스 또는 ID 모든 요소의 값을 변경해야하는 경우에, 당신은 을 사용해야합니다 루프에 대해 대신 을 사용하고 polamoros에 명시된대로 값을 변경하려면 $ (this) .attr()을 사용하십시오.