如何使用 jQuery .each 对匹配对象的子集进行不同的操作

发布于 2024-08-16 03:18:21 字数 486 浏览 6 评论 0原文

我正在使用最新的 jQuery(通过 Google CDN),并使用此代码来构建 TOC:

$("#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 添加一个类。

任何有用的意见,我们将不胜感激并深表感谢!

I'm using latest jQuery (via the Google CDN) and am using this code to build a TOC:

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

Works a treat.

I want the .each loop to treat matched h2's differently from matched h3's in order that I may add a class to the li's resulting from h2's.

Any helpful comments, most appreciated and gratefully received!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

污味仙女 2024-08-23 03:18:21
$("#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>");
});
$("#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>");
});
蹲在坟头点根烟 2024-08-23 03:18:21

检查nodeNametagName

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

Check the nodeName or tagName.

$("h2").each(function(i){
  alert(this.nodeName + " " + i); // Alerts 'H2 0,' 'H2 1,' etc.
});
舂唻埖巳落 2024-08-23 03:18:21

您从代码中创建一个函数并使用不同的参数调用它:

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

You create a function out of your code and call it with different parameters:

$("#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>");
}
南街九尾狐 2024-08-23 03:18:21

请注意,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);

Note that Append is expensive, so, for the sake of optimisation, you should move the append() function out of your loop, to only do it once instead of for each selected element.

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);
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文