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

jsFiddle Demo

for every とそれに続くものを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 に答える
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 に答える
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 に答える