javascript - SVG <title> 文本循环获取数组的最后一个元素

Question

我添加了<title> <g> 下的标签我的 svg 文件的标签。现在我需要在 <title> 中添加一些文本标记以稍后制作鼠标悬停工具提示。我将输入的文字 <title>来自name第二个 g 的属性标签。我正在创建一个循环，但它总是将数组的最后一个元素写入 <title> 。以下是 svg 文件的基本结构:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="product123">
    <g id="id1" name="1AC1">
        <path style="stroke:black; fill:none;" d="/some path"/>
        <title>//text comes from name attr of "g"</title> //tags added with the code below
    </g>
    <g id="id2" name="1AC2">
        <path style="stroke:black; fill:none;" d="/some path"/>
        <title>//text comes from name attr of "g"</title>
    </g>
    <g id="id3" name="1AC3">
        <path style="stroke:black; fill:none;" d="/some path"/>
        <title>//text comes from name attr of "g"</title>
    </g>
    .........

这里是获取 SVG 元素并创建 <title> 的 JS 代码标记并传递 name <g> 的属性

var $svg = jQuery(data).find('svg');
$('g>g').each(function() {
    var $input = $( this );
    var c = function () {
        return $input.attr("name") //get the "name" attributes and store in var c
    };
    $(this).append("<title/>"); //create <title> tag
    $('g>g>title').each(function() { //I am in <title> tag
       $(this).text(c) //pass all "c" as text to each <title>
       });
    });
});

现在有了上面的代码，我可以输入 <title>标签，但每个 <title> 返回的文本是相同的。并且该值始终为 1AC3这是 name g id="id3" 的属性。我认为是关于.each()的回调。但我无法解决..我怎样才能把每个 name <g> 的属性作为 <title> 的文本值？谢谢。

编辑 PS。 svg 文件是从其他平台导出的，导出器的源代码无法用于定义 <title>那里。

Answer 1

问题是您循环了 g>g 两次，并在第二次运行时覆盖了原始值。

var $svg = jQuery(data).find('svg');
$('g>g').each(function() {
    var $input = $( this );
    var c = function () {
        return $input.attr("name") //get the "name" attributes and store in var c
    };


    /*
    $(this).append("<title/>"); //create <title> tag

    // This part here is over-writing your previous title.
    $('g>g>title').each(function() { //I am in <title> tag
       $(this).text(c) //pass all "c" as text to each <title>
       });
    });
    */

    // Use this instead to set the title on the current
    // element. 
    $(this).attr("title", c); // correct way to set the title attribute
});