Question

我有一个这样的菜单列表：

<ul>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
<li class="but"><a href="#">ONE WORD<small>Other words here</small></a></li>
</ul>

如何从li.but自动选择第二个单词并将其变成这样的跨度：

<ul>
<li class="but"><a href="#">ONE <span>WORD<span><small>Other words here</small></a></li>
<li class="but"><a href="#">ONE <span>WORD<span><small>Other words here</small></a></li>
<li class="but"><a href="#">ONE <span>WORD<span><small>Other words here</small></a></li>
<li class="but"><a href="#">ONE <span>WORD<span><small>Other words here</small></a></li>
</ul>

非常感谢！

Answer 1

你走了：

$('li.but > a').html(function(i, v) {
    return v.replace(/\s(.*?)\s/, ' <span>$1</span> ');
});

现场演示： http://jsfiddle.net/simevidas/6dkAy/3/

Answer 2

这样的事情：

$('ul > li.but > a').html(function (i, oldHtml)
{
    return oldHtml.replace(/(\s)(\w+)/, '$1<span>$2</span>');
});

演示：http://jsfiddle.net/mattball/ptUuS/

Answer 3

下面：

$('.but a').each(function() {
   var $a = $(this);
   var $small = $a.find('small');
   var smallText = $small.html();
   $small.remove();
   var arr = $a.html().split(' ');
   arr[1] = ['<span>', arr[1], '</span>'].join('');
   $a.html(arr.join(' ')).append(['<small>', smallText, '</small>'].join(''));
});

jsFiddle

Answer 4

你去吧

$("ul > li > a").each(function(index, el) {

   var sec = $(this).html().split(" ");
   sec = sec[1].split("<")[0];
   var total = "<span>" + sec + "</span>";

   var html = $("ul > li > a").html();
   html = html.replace(sec, total);
   $(this).html(html);
});

Answer 5

下面是一个用类包装第二个单词的代码。也许你可以采用它。做这样的事情;

$('.list-item a').each(function(){ var text = $(this).text().split(' '); if(text.length < 2) return; text[1] = '<span class="color-red">'+text[1]+'</span>'; $(this).html( text.join(' ') ); });

jQuery - 选择第二个单词并扭曲文本

5 个答案: