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

我有一个导航菜单，我想使用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>')

});

$（'.navbar nav li a'）。每个（函数（i）{
var menuElement=$（this.html（）；
var menuElementLenght=menuElement.length；
var lastChar=menuElement.charAt（menuelementlength-1）；
$（lastChar）.wrap（“”）
});

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

使用

.HTML（）

，如图所示：-

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

$（'.navbar nav li a'）.html（函数（索引，html）{
返回html.slice（0，html.length-1）+''+html.slice（html.length-1）+''；
});

使用

.html（）

，如图所示：-

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

$（'.navbar nav li a'）.html（函数（索引，html）{
返回html.slice（0，html.length-1）+''+html.slice（html.length-1）+''；
});

---

您只需使用

regex

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

$（'.navbar nav li a'）.html（函数（ux，txt）{
返回txt.replace（/（.$）/，“$1”）；
});

---

在正则表达式语言中，

（.$）

这将匹配最后一个字符<代码>$表示字符串的结尾。由于我们使用

（）

对其进行分组，因此我们可以使用

$notation

访问匹配的组。您只需使用

正则表达式即可

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

$（'.navbar nav li a'）.html（函数（ux，txt）{
返回txt.replace（/（.$）/，“$1”）；
});

在正则表达式语言中，
（.$）
这将匹配最后一个字符<代码>$

表示字符串的结尾。由于我们使用

（）

对其进行分组，因此我们可以使用

$notation

访问匹配的组，这里有一种方法：

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

$（'p'）。每个（函数（索引、元素）{
//抓住你想要的所有元素。
变量$el=$（元素）；
var words=$el.text（）.split（“”）；//将单词拆分为字母
$el.html（“”）；//删除旧内容
//现在，这段代码将每个字母包装在一个范围内，但您可以从这里获取if！
for（var i=0；i

这里有一种方法：

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

$（'p'）。每个（函数（索引、元素）{
//抓住你想要的所有元素。
变量$el=$（元素）；
var words=$el.text（）.split（“”）；//将单词拆分为字母
$el.html（“”）；//删除旧内容
//现在，这段代码将每个字母包装在一个范围内，但您可以从这里获取if！
for（var i=0；i

假设包装有效，你需要将新元素追加到原件上，我会在下面举一个例子。其他答案更好，不同的方法，我刚刚完成了你给出的代码。假设包装有效，你需要将新元素追加到原件上，我会在下面贴一个例子，其他答案更好，有不同的方法，我刚刚完成了你给出的代码。谢谢你的解释谢谢你的解释