0

以前可能已经问过这类问题，但我无法得到我需要工作的具体变化。使用 jquery，我只需要在页面首次加载时自动更改输出 html，无需用户交互。

所以，我被这个无法修改的 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 精通！

谢谢，达尔。

4

4 回答 4

1

定位所有.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-08T13:04:29.890 回答
1

现场演示

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

更新

处理您的其他链接以指向新的锚点：

现场演示

$(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);
  });
});

更新

在这里我们处理其余没有自己字母的链接

 $(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-08T13:09:37.883 回答
0

就像是...

 $("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-08T13:10:29.823 回答
-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-08T13:16:46.793 回答