Как использовать jQuery .each, чтобы по-разному работать с подмножеством совпадающих объектов - PullRequest
2 голосов
/ 23 декабря 2009

Я использую последнюю версию jQuery (через Google CDN) и использую этот код для создания оглавления:

$("#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, чтобы я мог добавить класс к li, полученный из h2.

Любые полезные комментарии, наиболее ценимые и с благодарностью полученные!

Ответы [ 4 ]

1 голос
/ 23 декабря 2009
$("#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>");
});
1 голос
/ 23 декабря 2009

Отметьте nodeName или tagName.

$("h2").each(function(i){
  alert(this.nodeName + " " + i); // Alerts 'H2 0,' 'H2 1,' etc.
});
0 голосов
/ 23 декабря 2009

Обратите внимание, что Append является дорогостоящим, поэтому для оптимизации вы должны убрать функцию 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);
0 голосов
/ 23 декабря 2009

Вы создаете функцию из своего кода и вызываете ее с другими параметрами:

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