내가 TOC를 구축 (구글 CDN을 통해) 최신 jQuery를 사용하고 있는데이 코드를 사용하고

Question

일치하는 객체의 하위 집합에서 다르게 작동의 jQuery .each 사용 방법 :

$("#infoArticles h2, #infoArticles h3").each(function(i) { 
    var current = $(this); 
    current.attr("id", "title" + i); 
    $("#toc").append("<li><a id='link" + i + "' href='#title" + i + "' title='" + current.attr("tagName") + "'>" + current.html() + "</a></li>"); 
}); 

는 치료를 작동 .

.each 루프가 일치하는 h2를 일치 된 h3과 다르게 처리하여 h2의 결과 인 li에 클래스를 추가 할 수있게하려고합니다.

가장 도움이되고 감사의 말씀을 표합니다.

Answer 1

nodeName 또는 tagName을 확인하십시오.

$("h2").each(function(i){ 
    alert(this.nodeName + " " + i); // Alerts 'H2 0,' 'H2 1,' etc. 
}); 

Answer 2

$("#infoArticles h2, #infoArticles h3").each(function(i) { 
    var current = $(this); 
    current.attr("id", "title" + i); 
    if(this.tagName == "H2"){ 
     //h2 
    }else{ 
     //h3 
    } 
    $("#toc").append("<li><a id='link" + i + "' href='#title" + i + "' title='" + current.attr("tagName") + "'>" + current.html() + "</a></li>"); 
}); 

Answer 3

당신은 당신의 코드에서 함수를 만들고 다른 매개 변수와 함께 호출 추가] 최적화를 위해, 비싸다, 그래서

$("#infoArticles h2").each(function(i) { 
    myFunction("ma-classe"); 
}); 
$("#infoArticles h3").each(function(i) { 
    myFunction(); 
}); 

function myFunction(class=""){ 
    var current = $(this); 
    current.attr("id", "title" + i); 
    $("#toc").append("<li class='"+class+"'><a id='link" + i + "' href='#title" + i + "' title='" + current.attr("tagName") + "'>" + current.html() + "</a></li>"); 
} 

Answer 4

주, 당신은 이동해야 루프에서 append() 함수를 사용하여 각 선택된 요소 대신 한 번만 수행하십시오.

var htmlToInsert = null; 
$("#infoArticles h2, #infoArticles h3").each(function(i) { 
    var current = $(this); 
    current.attr("id", "title" + i); 
    if(this.tagName == "H2"){ 
     //h2 
    }else{ 
     //h3 
    } 
    htmlToInsert += "<li><a id='link" + i + "' href='#title" + i + "' title='" + current.attr("tagName") + "'>" + current.html() + "</a></li>"; 

}); 
$("#toc").append(htmlToInsert);