3

我正在尝试编写一个小 jQuery 脚本来检查一组 div 以查看它们是否具有 data-name 属性。对于具有数据名称的那些，它将创建一个链接。该链接的 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>
4

2 回答 2

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);
    });
    */
});
于 2012-06-01T11:13:45.213 回答
0

与其在执行 prepend 之后遍历 a 标记，不如使用所需的 href 属性制作 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>');
});
于 2012-06-01T11:18:53.627 回答