Question

我正在寻找一种方法将自定义类添加到特定类的第一个和第二个单词中？

我的代码就像这样

<h2 class="content-heading">Latest News</h2>

我想要像

这样的东西

<h2 class="content-heading"><span class="1">Latest</span> <span class="2">News</span></h2>

Answer 1

您可以使用函数设置html，然后split innerText和map设置span。

$('.content-heading').html(function() {
  return this.innerText.split(' ').map(function(e, i) {
    return $('<span />', {
      class: 'i' + i,
      text: e
    });
  });
});

.i0 {
  color:red;  
}

.i1{
   color:blue; 
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2 class="content-heading">Latest News</h2>

注意：类需要是SGML名称。因此，我在我的示例中以i为前缀。

Answer 2

另一种方式：

var t = $(".content-heading").text();
t = t.replace(/.*?\s/, function (v) {
    return "<span class='class1'>" + v + "</span>";
});
$(".content-heading").html(t);

Fiddle

Answer 3

您已使用<span>标记执行此操作，但您需要使用字符而不是类的数字。只需用字母替换1和2，然后在css中访问它们就可以了

<h2 class="content-heading"><span class="h">Latest</span> <span class="f">News</span></h2>


.h{
  color: red;
}
.f{
  color: blue;
}

Answer 4

您可以使用javascript自动执行此操作，如果这是您正在寻找的答案类型，请查看此内容。

这会将word的变量包含在<span>类first-word中。

$('.content-heading').each(function() {
   var html = $(this).html();
   var word = html.substr(0, html.indexOf(" "));
   var rest = html.substr(html.indexOf(" "));
   $(this).html(rest).prepend($("<span/>").html(word).addClass("first-word"));
});

以下是 JSFiddle 示例。

Answer 5

可能会这样：

var h2 = $('h2');
var text = h2.text().split(' ');

for( var i = 0; i < 2; i++ ) {
text[i] = '<span class="class'+i+'">' + text[i] + '</span>';
}
h2.html(text.join(' '));

http://jsfiddle.net/H5zzq/

（我从jQuery: wrap every nth word in a span）

那里偷了这个答案

有没有办法在特定类的第一个单词中添加一个类？

5 个答案: