javascript - 根据数据属性生成链接

Question

我正在尝试编写一个小的 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>>);
    });
});

任何帮助都会很棒。

谢谢

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

Answer 1

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

在这里工作: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);
    });
    */
});