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

Question

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

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

$('.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

您可以使用regex简单地做到这一点，

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

DEMO

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

Answer 2

使用.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 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);
    }
  });