jQuery var =文字+數字

Question

我有一個帶有自定義項目符號圖標的項目符號列表<ul> 。 我需要某種javascript，它將遍歷我的列表，並檢查icon-之后是否有數字，如果確實如此，則添加一個<img>標記，然后將icon- +數字作為一個類添加，因為每個icon- +數字將是一個不同的圖標。

請參閱下面的代碼。

在此先感謝您的幫助

HTML

<ul class="someclass">
  <li>
    <div class="divClass">
      [icon-1]
    </div>
    Some Text
  </li>

  <li>
    <div class="divClass">
      [icon-2]
    </div>
    Some Other Text
  </li>
</ul>

Javascript嘗試

$(".someclass .divClass").each(function() {    
        var icon = [icon + number]

    $(".divClass:contains('icon')").text().replace('<img class="icon" src="img/path/pic.png" alt="Bullet List Icon" />');
});

Answer 1

嘗試這個

var i = 1; 
    $(".someclass .divClass").each(function() {  

        var icon = "[icon-" + i++ +"]"; 

    $(".divClass:contains('"+icon+"')").html('<img class="icon" src="img/path/pic.png" alt="Bullet List Icon" />');
});

更新 ：保留li文本：

var i = 1; 
    $(".someclass li").each(function() {  

        var icon = "[icon-" + i++ +"]"; 
        var liText = $(this).text(); // Get all text of li element
        liText = liText.replace(icon, "");// Remove the [icon-i] string from the text. 
    $(".someclass li:contains('"+icon+"')").html('<img class="icon" src="img/path/pic.png" alt="Bullet List Icon" />'+ liText);
});

Answer 2

您可以使用此：

 $('.someclass .divClass').each(function(){ //Get the actual text of div and remove the '[]' var val = $(this).text().replace(/\\[|\\]/g, ""); //Check if the string has a number if(val.match(/\\d+/g) !== null){ //If true set the class as the prev text and add the img tag $(this).addClass(val).html('<img src="http://placehold.it/50"/>'); } }) 

 .icon-1 { background:purple; } .icon-2 { background:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="someclass"> <li> <div class="divClass"> [icon-1] </div> Some Text </li> <li> <div class="divClass"> [icon-2] </div> Some Other Text </li> <li> <div class="divClass"> [icon] </div> Some Other Text </li> </ul>