0

是否可以使用 jQuery 在特定字符串之前添加 HTML 元素？例如，如果我有：

<h4>Men's Basketball vs. Georgetown</h4>

我想做到：

<h4>Men's Basketball <span class="team">vs. Georgetown</span></h4>

我可以用 jQuery 做到这一点吗？我尝试使用各种选项（:contains、prepend()、html()、pop() 等。但它们似乎都不能完全正确地工作。

4

4 回答 4

1

你可以这样做：

var h4 = $('h4');
var str = 'vs. Georgetown';
h4.html(h4.text().replace(str, '<span class="team">'+str+'</span>'));

假设您想在所有元素中换vs行并结束文本，那么您可能会这样做h4

$('h4').each(function(){
   var bip = $(this).text().split(/(?<vs)/);      
   if (!bip.length) return;
   $(this).html(bip[0]+'<span class="team">'+bip[1]+'</span>');
});
于 2013-02-13T19:58:17.280 回答
1

jsFiddle Demo

假设对于每个h4您想要的vs. 以及随后的内容都包裹在一个跨度中，那么您应该遍历每一个，确定vs.字符串中的位置，然后将其包裹在一个跨度中。

html:<h4>Men's Basketball vs. Georgetown</h4>

CSS：.team{ color: red; }

js：

$("h4").each(function(){
 var v = 'vs.',t = $(this), prefix, suffix;
 if(t.text().indexOf(v) > -1 ){
  prefix = t.text().substr(0,t.text().indexOf(v));
  prefix += "<span class='team'>";
  suffix = t.text().substr(t.text().indexOf(v));   
  suffix += "</span>";
  t.html(prefix+suffix);
 }
});
于 2013-02-13T20:03:47.057 回答
0

如果我是你，我会给 h4 一个 id。

$(document).ready(function(){
    var text = $('h4').html().split('vs.');

    $('h4').html(function(){
        return text[0] + '<span class="team"> vs. '+ text[1] +'</span>';
    });
});

或者，如果你有一个 ID。让我们说Id1。

$(document).ready(function(){
    var text = $('#Id1').html().split('vs.');

    $('#Id1').html(function(){
        return text[0] + '<span class="team"> vs. '+ text[1] +'</span>';
    });
});
于 2013-02-13T20:14:38.633 回答
-1

我会做...

var str = $('h4').split('vs.'); // team name

$('h4').html(function(){
    return str[0] + 'vs. <span class="team"> '+ str[1] +'</span>';
});

与之前的答案相比，这似乎更像是一个动态解决方案。

这是你的工作 jsFiddle

于 2013-02-13T20:02:47.523 回答