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

回答

相关问题