将 link 中带有 jQuery 的标题内容写入相应 link 之后的 DOM

Question

我会抓到link-title然后把<a hreflink写成span。将 link 标记为一个段落并在旁边放置一个小图标会有很好的效果（见下图）。

See Example and hover the Icons next to the text

这是我的DOM-Markup：

目前没有问题：

    $( "a.sidenote-icon" ).wrapAll( "<span class='sidenote'><cite class='icon quelle'></cite></span>" );

    var title = $( "a.sidenote-icon" ).attr('title');
    var titlewrap = "<span>" + title + "</span>";
    $( "cite" ).after(titlewrap);

如果我在多个案例中使用 each-function jQuery 将标题添加到一个跨度中，但是三次 - 因为我的段落中有三个 link。这是我的每个功能..

$( "a.sidenote-icon" ).each(function() {
    $( this ).wrapAll( "<span class='sidenote'><cite class='icon quelle'></cite></span>" );
    var title = $( this ).attr('title');
    var titlewrap = "<span class='testy'>" + title + "</span>";
    $( "cite" ).after(titlewrap);
});

我对 each-func 有疑问。标题应该只插入一次 - 对于我页面上每个带有特殊 class 的 link。我的错误在哪里？查看输出

Answer 1

请检查更新example

$( ".frame a.sidenote-icon:first" ).each(function() {
    $( this ).wrapAll( "<span class='sidenote'><cite class='icon quelle'></cite></span>" );

    var title = $( this ).attr('title');
    var titlewrap = "<span class='testy'>" + title + "</span>";
    $( "cite" ).after(titlewrap);

});

您只需像下面这样更改选择：

$( ".frame a.sidenote-icon:first" ).

Answer 2

感谢cBroe。 https://codepen.io/mobilat/pen/VwKGxpV

$( "a.sidenote-icon" ).each(function() {
    $( this ).wrapAll( "<span class='sidenote'><cite class='icon quelle'></cite></span>" );

    var title = $( this ).attr('title');
    var titlewrap = "<span class='testy'>" + title + "</span>";
    $( this ).parent().after(titlewrap);
});

将 link 中带有 jQuery 的标题内容写入相应 link 之后的 DOM

Write title content from links with jQuery into DOM after the respective link

javascript

html

jquery

each