jquery var = text + number

Question

我有一个带有自定义项目符号图标的项目符号列表<ul>。我需要某种类型的javascript来查看我的列表并检查图标 - 后面是否有数字，如果只是添加<img>标记并添加图标 - +数字作为一个类，因为每个图标 - +数字将是一个不同的图标。

请参阅下面的代码。

提前感谢您的帮助

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>