jQuery的替代HTML

這種類型的問題可能已經問過的字符串，但我不能得到具體的變化，我需要工作。使用jquery，我只需要在頁面首次加載時自動更改輸出html，而無需用戶交互。jQuery的替代HTML

所以，我堅持用這個網站，我不能修改：

<ul> 
    <li><a href="A" class="fullProfile">View Full Profile</a></li> 
    <li><a href="author" class="extLink">Laboratory Page</a></li> 
</ul>

我需要所有上述的改變只是：

<a name="A" class="letter">A</a>

正如你可能已經猜到，我需要最終重複這26次（所以我對每封信都有錨鏈接），所以我可以輕鬆地重複的精簡和高效的事情會很棒。

一個jsfiddle或類似的將是理想的，顯示我需要放在我的文檔的<head>，因爲我絕對不是jquery精通！

感謝，達累斯薩拉姆。

來源

2013-07-08 user2291964

搭建的jsfiddle，人們會更容易幫助你 – reekogi

'$（ 'UL'）HTML（ '新的HTML'）;'也許？ *編輯：*可能需要在之前調用父項：'$（'ul'）。parent（）。html（'new html'）;'。 – qwerty

同意reekogi，設置在的jsfiddle方案具有良好的代碼示例 – Jacques

目標的所有.fullProfile環節，拿到href，因爲它看起來應該是錨的名稱，並替換最接近的包裹UL新主播：

$('.fullProfile').each(function() { 
    var new_anchor = $('<a />', {name : $(this).attr('href'), 
           'class':'letter', 
           text : $(this).attr('href') 
           }); 
    $(this).closest('ul').replaceWith(new_anchor); 
});

來源

2013-07-08 13:04:29 adeneo

@mplungjan - 沒有，只有'道具（）'或'這一點。href'這樣做，而不是'attr（）'或'getAttribute'，所以這個工作就像它。 – adeneo

明白了。謝謝。似乎我們的解決方案是非常相似的:) +1 – mplungjan

@mplungjan - 偉大的頭腦想象一樣，我想！ – adeneo

Live Demo

$(function() { 
    $(".fullProfile").each(function() { 
     var href= $(this).attr("href"); 
     var link = $('<a name="'+href+'" class="letter">'+href+'</a>'); 
     $(this).closest("ul").replaceWith(link); 
    }); 
});

UPDATE

處理您的OTH呃鏈接，在新的錨點：

Live Demo

$(function() { 
    $(".fullProfile").each(function() { 
    var href = $(this).attr("href"); 
    var link = $('<a name="'+href+'" class="letter">'+href+'</a>'); 
    $(this).closest("ul").replaceWith(link); 
    }); 
    $(".cwyFellowName a").each(function() { 
    var href = $(this).attr("href"); 
    if (href.length==1) $(this).attr("href","#"+href); 
    }); 
});

UPDATE

在這裏，我們處理的鏈接其餘沒有自己的信

$(function() { 
    $(".fullProfile").each(function() { 
     var href = $(this).attr("href"); 
     var link = $('<a name="'+href+'" class="letter">'+href+'</a>'); 
     $(this).closest("ul").replaceWith(link); 
    }); 
    $(".cwyFellowName a").each(function() { 
     var href = $(this).attr("href"); 
     if (href.length==1) $(this).attr("href","#"+href); 
     else if (href=="link") { 
     var txt = $(this).text(); 
     if (txt.length==1) { 
      $(this).attr("href","#"+txt); 
      var nextDiv = $(this).parent().nextAll(".cwyFellowLinks:first"); 
      nextDiv.find("a").attr("name",txt).text(txt); 
     } 
     }  
    }); 
});

來源

2013-07-08 13:09:37 mplungjan

你意識到你需要拆分和拼接的原因是你獲得了href屬性，而不是屬性？ – adeneo

我改成道具，因爲我和attr有同樣的問題，肯定錯過了一些東西。謝謝 – mplungjan

@mplungjan感謝您的回覆。我直接添加代碼到我這裏演示頁： http://www.ucd.ie/research/sandbox/conway/fellows/07.html 我只是要注意在某一時刻的問題。 .. – user2291964

喜歡的東西...

$("ul a").each(function(){ 
    $(this).html($(this).attr('href')); 

    $(this).attr('class', 'letter'); 
    $(this).attr('name', $(this).attr('href')); 
    $(this).removeAttr('href'); 
});

http://jsfiddle.net/gf4Qh/1/

你可以選擇玩，和值:)

來源

2013-07-08 13:10:29 Eleazan

這不會改變兩個錨點並保持無序列表嗎？ – adeneo

_I需要上述所有的變化只是..._ – mplungjan

是..對不起..我沒讀好:( – Eleazan

-1

這個是什麼？

http://jsfiddle.net/srU5w/3/

$(document).ready(function(){ 
    $('ul').each(function(){   

    var letter = 'not found'; 

    $(this).find('.fullProfile').each(function(){ 
     letter = $(this).attr('href'); 
    }); 

    $(this).replaceWith('<a name="'+letter+'" class="letter">'+letter+'</a><br/>'); 
});

}）;

來源

2013-07-08 13:16:46 netblognet

這將保持UL – mplungjan

@mplungjan好吧，是我的錯，只是編輯其他時間。現在，它應該沒問題。 – netblognet

現在它可能ALMOST工作，但用不用'find'既然你不針對該信息的鏈接。但是也有在他的網頁許多其他的UL其中也有鏈接不屬於創作 – mplungjan

jQuery的替代HTML

回答

相關問題