jQueryを使用して文字とイメージを置き換える方法は？

Question

一部のリストですべての*文字を置き換える方法は？

例：

<div class="nav"> 
     <ul> 
      <li><a href="#">Hotels *****</a></li> 
      <li><a href="#">Hotels ****</a></li> 
      <li><a href="#">Hotels ***</a></li> 
      <li><a href="#">Some other menu</a></li> 
     </ul> 
</div> 

jQueryの例：

$().ready(function() { 
    if ($('.logo')[0].offsetWidth == 295) { 
     $('.nav ul li a span').each(function() { 
      string = $(this).text(); 
      $(this).html('<img src="img/star.png" alt="' + string + '" />'); 
     }); 
    } 
}); 

、それはすべての星を変更する以外、私は、それのようにすべての作品はすべきで、1つだけでなく（このコードのすべての星を、変更したいです1つの画像で）。どのくらい多くの星のチャー、それは多くの画像であることをshuld。

の目標は、このようにそれを変更することです：

$('.nav ul li a span') - >にはスパンがない：

some text <img src="img/star.png" alt="star" /><img src="img/star.png" alt="' + string + '" /><img src="img/star.png" alt="' + string + '" /><img src="img/star.png" alt="' + string + '" /><img src="img/star.png" alt="' + string + '" /> 

Answer 1

あなたの選択は、あなたのマークアップと同期していないと

some text ***** 

あなたのli s

セレクタを修正して、ここにいますトリックを行うだろうと彼はコード：必要な要素の上にhttp://jsfiddle.net/mrchief/kycae/

Answer 2

反復処理し<img>要素に「*」を変更するために正規表現を使用します。

$('.nav ul li a').each(function() { 
    var txt = $(this).text(); 
    var img = '<img src="img/star.png" alt="' + txt + '" />' 
    var html = txt.replace(/\*/g, img); // replace every star with an image tag 
    $(this).html(html); 
}); 

ここでデモです。文字列のすべてを変更するには、正規表現に/gフラグが必要です。あなたは、文字列たら

$('...').each(function() { 
    var $this = $(this), 
     html = $this.html(); 

    html = html.replace(/\*/g, '<img href="...">'); 
    $this.html(html); 
}); 

Answer 3

：

some text ***** 

を、あなたはイメージで星を置き換えるためにsplit()とjoin()を使用することができます。

var original = 'some text *****' ; 
var withImages = original.split('*').join('<img src="img/star.png" alt="star" />'); 

スプリットで区切られた各要素を持つ配列を作成します渡された文字列とjoinは配列を文字列に返し、渡された文字列を各要素の間に挿入します。

Answer 4

html()^[docs]メソッドに関数を渡すだけで、これをきれいに行うことができます。

$('.nav ul li a').html(function(i,html) { 
    return html.replace(/\*/g, '<img src="http://dummyimage.com/30x30/f00/fff.png&text=*" alt="' + html + '" />'); 
}); 

例：http://jsfiddle.net/vrqgv/