Question

我有一长串<li> s。下面的一段JQuery代码帮助我设置每个<li>的最后一个单词的样式。请看一下here

现在的问题是我不希望它将样式应用到上一个<li>。

我可以这样做吗？

这是我的整个代码。请看一下

<html>

<script>
   $(document).ready(function(){
       $('li').each(function(){
       var $this = $(this), text=$this.text().trim(), words = text.split(/\s+/);
       var lastWord = words.pop();
       words.push('<span class="Red">' + lastWord + '</span>');
       $this.html(words.join(' '));
   });
});
</script>
<style>
.Red{color:red}
</style>
<body>
<li>my holy tag galore</li>
<li>my sandwich is balloney</li>
<li>the expected is not to be </li>
<li>oh REALLY? </li>

<script type="text/javascript" src="JQuery-1.10.2.js"></script>

</body>
</html>

非常感谢！

Answer 1

我看到的唯一问题是你的“红色”和“粗体”类实际上可能没有真正定义。我自己测试了你的代码并且它运行得很好 - 它将所述类添加到最后一个单词。

但是，为了保持简单（嗯，好吧......为了RegEx的缘故）你可以使用 replace 功能，就像这样：

$('li').click(function(){
    var $t = $(this);
    $t.html($t.text().trim().replace(/(\w+)[.!?]?\s*$/, "<b>$1</b>"));
});

它用<b></b>标签围绕最后一个单词。只需用你喜欢的任何东西替换它们。 click事件也是为了测试，您可以随时将其更改为each函数或其他任何内容。

以下是RegEx实际运作方式的细分：

https://stackoverflow.com/a/3648147/1368043

最后的话语

1 个答案: