如何用 span 标签包装每个菜单项的最后一个字母？

Question

我有一个导航菜单，我想用 span 标签包裹每个菜单项文本的最后一个字母，使用 jQuery。

这是我目前的方法，但它不起作用：

$('.navbar-nav li a').each(function(i) {

    var menuElement = $(this).html();

    var menuElementLenght = menuElement.length;

    var lastChar = menuElement.charAt(menuElementLenght - 1);

    $(lastChar).wrap('<span></span>')

});

我想是因为我的目标是剥离的字符串而不是 HTML 元素。

Answer 1

如图所示使用.html() :-

$('.navbar-nav li a').html(function (index, html) {
  return html.slice(0, html.length - 1) + '<span>' + html.slice(html.length - 1) + '</span>';
});

DEMO

Answer 2

你可以简单地用 regex,

$('.navbar-nav li a').html(function(_,txt) {
    return txt.replace(/(.$)/, "<span></span>");
});

DEMO

在正则表达式的语言中，(.$)这将匹配最后一个字符。 $表示字符串结束。由于我们使用 () 对其进行了分组，因此我们可以使用 $notation.

访问匹配的组

Answer 3

这是一种方法：

 $('p').each(function(index, element) {
    // grab all of the elements you want.
    var $el = $(element);
    var words = $el.text().split(' '); // split the word into letters
    $el.html(''); // delete the old stuff
    // now this code wraps every letter in a span, but you can take if from here!
    for (var i = 0; i < words.length; i++) {
      var newSpan = $('<span>').text(words[i] + ' ');
      $el.append(newSpan);
    }
  });

如何用 span 标签包装每个菜单项的最后一个字母？

How to wrap last letter of each menu item with a span tag?

javascript

each

jquery

DEMO