SVG <title> text loop gets the last element of array

Question

I added a <title> tag under the <g> tag of my svg file. Now I need to put some text in the <title> tag to make a mousehover tooltip later. The text I will put in <title> comes from a name attribute of the second g tag. I am making a loop, but it always write the last element of the array into the <title> . Following is the basic structure of the svg file:

<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>
    .........

Here is the JS code to get in SVG elements and create the <title> tag and pass the name attr of <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>
       });
    });
});

now with the code above, I am able to put <title> tags but the returned text is the same for each <title> . And the value is always 1AC3 which is the name attr of g id="id3" . I think it is about the callback of .each() . But I couldn't solve.. How can I put each name attr of <g> as the text value of <title> ? Thanks.

Edit PS. The svg file is exported from another platform and source code of exporter is not available to define the <title> there.

Answer 1

The issue is that you're looping through the g>g 's twice and over-writing the original value on the second run through.

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