如何用jQuery替換字符與圖像？

例子：

<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 + '" />'); 
     }); 
    } 
});

我想改變所有的星星，而不僅僅是一個（與此代碼，像它的所有作品應該，但它改變了所有明星與一個圖像）。它是多少明星焦炭，許多圖像。

的目標是要改變這樣的：

some text *****

與

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 + '" />

來源

2011-08-16 Mladen

你的選擇是不符合您的標記同步：

$('.nav ul li a span') - >存在不跨度你的li s

修復選擇器，這裏是t他的代碼，會做的伎倆：

$('.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); 
});

這裏的演示：http://jsfiddle.net/mrchief/kycae/

來源

2011-08-16 17:44:03 Mrchief

非常感謝！它像一個魅力!!!! ;） P.S.我正在玩「span」標籤來獲得替代品，所以我寫了意外......;） – Mladen

@Mladen：很高興它有幫助。不要忘記標記爲答案。 – Mrchief

遍歷所需的元素，並使用正則表達式來改變「*」到<img>元素。您需要在正則表達式上使用/g標誌來更改字符串中的所有標誌。

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

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

來源

2011-08-16 17:44:27

一旦你有你的字符串：

some text *****

可以使用split()和join()與圖像替換星：

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

拆分創建由分隔每個元素的數組傳入的字符串，並且連接返回一個數組到一個字符串，在每個元素之間插入傳遞的字符串。

來源

2011-08-16 17:44:32 Gus

只需將函數傳遞給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/

來源

2011-08-16 17:56:46 user113716

如何用jQuery替換字符與圖像？

回答

相關問題