Javascript 基于数据属性生成链接

我正在尝试编写一个小jQuery脚本，检查一组div，看看它们是否具有数据名属性。对于有数据名的，它将创建一个链接。该链接的href应该是数据值的名称加上包含文件扩展名（例如.txt）

除了我尝试将数据值添加到链接上之外，其他一切似乎都正常工作。此脚本的最终结果是为每个div输出如下内容：

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

下面是我的脚本。我已经确定了我有问题的领域

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

var-dataNameWrappers=$（“div#desktopSidebar div[data name]”）；
dataNameWrappers.each（函数（）{
var dataNameWrappers_action=“”+$（this）.attr（“数据名”）；
$（this）.prepend（
edit
）；
var dataNameWrapperEditLink=$（“div#desktopSidebar p.edit-link a”）；
dataNameWrapperEditLink.each（函数（）{
$（this.attr（'href'，）；
});
});

任何帮助都会很好

谢谢

根据要求，这里是我的侧栏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>

欢迎{{username}}
跟踪网球聊天
当前促销活动
现场得分
锦标赛
今天的简介：{{特色{u简介{u名称}
广告
网球聊天头条
最近的职位

我不知道，当您已经拥有了所需的一切时，为什么要使用第二个循环来添加HREF

工作小提琴在这里：

HTML:

欢迎{{username}}
跟踪网球聊天
当前促销活动
现场得分
锦标赛
今天的简介：{{特色{u简介{u名称}
广告
网球聊天头条
最近的职位

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

var-dataNameWrappers=$（“div#desktopSidebar div[data name]”）；
dataNameWrappers.each（函数（）{
var dataNameWrappers_action=$（this.attr（“数据名”）；
log（'data-name'+dataNameWrappers_操作）；
$（this.prepend（“
”）；
/*我不需要这个
var dataNameWrapperEditLink=$（“div#desktopSidebar p.edit-link a”）；
dataNameWrapperEditLink.each（函数（）{
$（this.attr（'href'，dataNameWrappers_操作）；
});
*/
});

在进行预结束后，最好使用所需的href属性生成HTML片段，而不是遍历a标记

以下是实现以下功能的代码：

$('#desktopSidebar .sidebar[data-name]').each(function(index, el){
    var href = $(el).attr('data-name') + ".txt";
    $(el).prepend('<p class="edit-link"><a href="' + href + '">Edit</a>');
});

$（'#desktopSidebar.sidebar[数据名]）。每个（函数（索引，el）{
var href=$（el.attr（'data-name'）+“.txt”；
$（el）.prepend（“
”）；
});

您能在干预之前显示原始节点吗？我已经在上面添加了HTML代码。

$('#desktopSidebar .sidebar[data-name]').each(function(index, el){
    var href = $(el).attr('data-name') + ".txt";
    $(el).prepend('<p class="edit-link"><a href="' + href + '">Edit</a>');
});