Generate link based on data attributes

Question

I am trying to write a little jQuery script that checks a set of div's to see if they have a data-name attribute. For the ones that have a data-name, it will create a link. The href of that link should be the name of the data-value plus contain the file extension (eg. .txt).

Everything seems to work OK except when I try to add the data value onto the link. The ultimate result of this script is to output something like this for each of those div's:

<p class="data-link"><a href="<<data_value>>.txt>>">Edit</a>

Below is my script. I have identified that area that I am having issue with.

var dataNameWrappers = $("div#desktopSidebar div[data-name]");
dataNameWrappers.each(function() {
    var dataNameWrappers_action = "" + $(this).attr("data-name");
    $(this).prepend("<p class='edit-link'><a>Edit</a></p>");
    var dataNameWrapperEditLink = $("div#desktopSidebar p.edit-link a");
    dataNameWrapperEditLink.each(function() {
        $(this).attr('href', <<stuck_here>>);
    });
});

Any help will be great.

Thanks

As requested, here is my sidebar HTMl structure

<div id="desktopSidebar">
    <div class="sidebar userbox">
        <h3 class="sidebarheader"> Welcome  {{username}}}</h3>
    </div>
    <div data-name="social_media_sitewide" class="sidebar socialmedia">
        <h3 class="sidebarheader">Follow Tennis-Chat</h3>
    </div>
    <div data-name="site_promotions" class="sidebar promotions">
        <h3 class="sidebarheader">Current Promotions</h3>
    </div>
    <div data-name="livescores" class="sidebar Livescores">
        <h3 class="sidebarheader">Live Scores</h3>
    </div>
    <div class="sidebar tournaments">
        <h3 class="sidebarheader">Tournaments</h3>
    </div>
    <div data-name="featured-profiles" class="sidebar profiles">
        <h3 class="sidebarheader">Today's Profile: {{featured_profile_name}}</h3>
    </div>
    <div data-name="side_advertisment" class="sidebar Advertisement">
        <h3 class="sidebarheader">Advertisement</h3>
    </div>
    <div class="sidebar Headlines">
        <h3 class="sidebarheader">Tennis-Chat Headlines</h3>
    </div>
    <div class="sidebar mostrecent" id="mostRecentTopics">
        <h3 class="sidebarheader">Most Recent Posts</h3>
    </div>
</div>

Answer 1

I don't know why you are using a second loop to add the HREFs when you already have everything you need.

Working fiddle here: http://jsfiddle.net/Q4j8S/.

HTML:

<div id="desktopSidebar">
    <div class="sidebar userbox">
        <h3 class="sidebarheader"> Welcome  {{username}}}</h3>
    </div>
    <div data-name="social_media_sitewide" class="sidebar socialmedia">
        <h3 class="sidebarheader">Follow Tennis-Chat</h3>
    </div>
    <div data-name="site_promotions" class="sidebar promotions">
        <h3 class="sidebarheader">Current Promotions</h3>
    </div>
    <div data-name="livescores" class="sidebar Livescores">
        <h3 class="sidebarheader">Live Scores</h3>
    </div>
    <div class="sidebar tournaments">
        <h3 class="sidebarheader">Tournaments</h3>
    </div>
    <div data-name="featured-profiles" class="sidebar profiles">
        <h3 class="sidebarheader">Today's Profile: {{featured_profile_name}}</h3>
    </div>
    <div data-name="side_advertisment" class="sidebar Advertisement">
        <h3 class="sidebarheader">Advertisement</h3>
    </div>
    <div class="sidebar Headlines">
        <h3 class="sidebarheader">Tennis-Chat Headlines</h3>
    </div>
    <div class="sidebar mostrecent" id="mostRecentTopics">
        <h3 class="sidebarheader">Most Recent Posts</h3>
    </div>
</div>

JavaScript:

var dataNameWrappers = $("div#desktopSidebar div[data-name]");
dataNameWrappers.each(function() {
    var dataNameWrappers_action = $(this).attr("data-name");
    console.log('data-name ' + dataNameWrappers_action);
    $(this).prepend('<p class="edit-link"><a href="' + dataNameWrappers_action + '">Edit</a></p>');
/* Don't need this
    var dataNameWrapperEditLink = $("div#desktopSidebar p.edit-link a");
    dataNameWrapperEditLink.each(function() {
        $(this).attr('href', dataNameWrappers_action);
    });
    */
});