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

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

3 个答案:

DEMO