jquery - jQuery .eachを使用して、一致したオブジェクトのサブセットを異なる方法で操作する方法

Question

私は（Google CDNを介して）最新のjQueryを使用しており、このコードを使用して目次を作成しています。

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

御馳走を動作します。

h2の結果であるliにクラスを追加できるように、.eachループで一致したh2を一致したh3とは異なる方法で処理する必要があります。

有益なコメント、最も感謝し、感謝して受け取った！

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 はコストがかかることに注意してください。したがって、最適化のために、append() 関数をループの外に移動して、選択した要素ごとではなく 1 回だけ実行する必要があります。

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