Question

我想改变

<h1>Headline Text - More Headline Text</h1>

到

<h1><span class="something">Headline Text</span> - More Headline Text</h1>

使用jQuery。

首先，我必须检查，如果有＆＃34; - ＆＃34;在整个网站的h1-tag中。如果有，我想在＆＃34; - ＆＃34;之前插入带有自定义类的span-tag。否则只需保持h1-tag不变。

这可能吗？

提前非常感谢！

Answer 1

试试这个

＆＃13;

$(document).ready(function(){
var controls =$('h1').html();
  var g=controls.split("-");
  if(g.length>1)
  {
    var texts='<span>'+g[0]+'</span> - '+g[1];
    alert(texts);
    $('h1').html(texts);
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<h1>Headline Text - More Headline Text</h1>

＆＃13;

Answer 2

试试这个： -

$('h1').each(function(){
  if($(this).html().indexOf("-") !== -1)
  {
     var html = $(this).html();
     var newhtml = html.split("-")[0];
     newhtml = "<span class='something'>"+ newhtml +"</span>"
     $(this).html(newhtml + "- " + html.split("-")[1])
  }
});

Fiddle

Answer 3

试试这个：

$('h1').each(function() {
  var found = $(this).text().indexOf('-') !== -1;
  if (found) {
    var arr = $(this).text().split('-');
    $(this).html('<span class="something">' + arr[0] + '</span> - ' + arr[1]);
  }
});

.something {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Headline Text - More Headline Text</h1>
<h1>Headline Text - More Headline Text</h1>
<h1>Headline Text</h1>
<h1>Headline Text - More Headline Text</h1>

jQuery在特殊字符之前在H1中插入SPAN

3 个答案: