3

一連の div をチェックして data-name 属性があるかどうかを確認する小さな jQuery スクリプトを作成しようとしています。データ名を持つものについては、リンクを作成します。そのリンクの 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

必要なものがすべて揃っているのに、2 番目のループを使用して 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 に答える