基於數據屬性生成鏈接

我想寫一個小的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>

來源

2012-06-01 Timothy Bassett

可你也表明干預前的原始節點？ –

我已經在上面添加了我的HTML代碼。 –

我不知道爲什麼你使用的是第二循環添加的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-01 11:13:45 codemonkey

通過一個標籤迭代你做的前置後取而代之的，它可能是更好地使與所需的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-01 11:18:53

這很好。謝謝。 –

基於數據屬性生成鏈接

回答

相關問題