替换列文本值

Replace column text values

本文关键字：文本 替换      更新时间：2023-09-26

所以我有我创建的这个数据库，现在他们想添加问题，我决定它可以更容易地分配值。现在我有一组<td class="issues">输出这些值。

1 2 3 4 5
2 3 4
1
1 4 5

现在我正试图分配字体awesome标签，用字体图标
代替每个数字，即:第1行将是<i class="fa fa-heartbeat" aria-hidden="true"></i>

到目前为止，我得到了它来获取内容并返回nodeType，只需要弄清楚如何用case或if语句替换数字。

    
      $( ".issues" ).contents().filter(function(){
          return this.nodeType === 3;
        });
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Find replace</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="issues">1 2 3 4 5</div>
    <div class="issues">2 3 4</div>
    <div class="issues">1 </div>
    <div class="issues">1 4 5</div>
  </body>
</html>

编辑

我的表:

<table>
    <tr data-binding-id="repeat1" data-binding-repeat="{{query1.data}}">
        <td style="display:none" data-row="{{id}}" ></td>
        <td class="tb-info text-xs-center">{{state}}</td>
        <td class="tb-info text-xs-center">{{data1}}</td>
        <td class="tb-info text-xs-center">{{data2}}</td>
        <td class="tb-info text-xs-center">{{data3}}</td>
        <td class="tb-info text-xs-center">{{data4}}</td>
        <td class="tb-info text-xs-center">{{total}}</td>
        <td class="small tb-data-off issues">{{issues}}</td>
    </tr>
</table>

好吧，下面是我解决你问题的方法:

$('.issues').each(function() {
  var $issue = $(this);
  var icons = ['heartbeat', 'calculator', 'compass', 'eraser', 'diamond']; //Set your icons
  var text = $issue.text(); // Cache the text
  $issue.empty(); // Clear the current text
  for (var i = 1; i < icons.length + 1; i++) { // Create icons corresponding to the numbers
    if (text.indexOf(String(i)) > -1) {
      $('<i />', {
        'aria-hidden': 'true',
        'class': 'fa fa-' + icons[i - 1],
      }).appendTo($issue);
    }
  }
});

要做到这一点，我们必须检查issues的每个word，因此我们将span中的单词包装起来，以便于阅读这些单词，

检查代码片段希望这是你想要的。

$(function(){
  var issues = $(".issues").length;
  for($i = 0; $i <= issues; $i++ ){
    var ic_i = $(".issues:eq("+$i+") span").length;
    for($k = 0; $k <= ic_i; $k++){
      var curr = $(".issues:eq("+$i+") span:eq("+$k+")" );
   // use your Conditional statmenst here.  
   // inside indexOf('') check for what you want 
   var isContains = $(curr).text(). indexOf('1') > -1;
      //
      
 if(isContains){                
   // replace your icon here
   $(curr).html("icon");
     }
    }
   }
   });
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Find replace</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="issues"><span>1</span> <span>2</span>    <span>3</span> <span>4</span> <span>5</span></div>
    
    <div class="issues"><span>2</span> <span>3</span> <span>4</span></div>
    
    <div class="issues"><span>5</span></div>
    
    <div class="issues"><span>1</span> <span>2</span><span>3</span></div>
  </body>
</html>

您可以使用each来循环每个.issuesdiv，然后使用map()将数字更改为图标。

$('.issues').each(function() {
  $(this).html($(this).text().trim().split(' ').map(function(e) {
    return '<i class="fa fa-' + e + '" aria-hidden="true">Icon' + e + ' </i>';
  }))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="issues">1 2 3 4 5</div>
<div class="issues">2 3 4</div>
<div class="issues">1</div>
<div class="issues">1 4 5</div>

根据你的HTML，一个简单的链式替换应该可以达到这个效果:

$(function() {
  $('.issues').html(function(_, txt) {
    return txt.replace('1', '<i class="fa fa-heartbeat" aria-hidden="true"></i>').
               replace('2', '<i class="fa fa-diamond" aria-hidden="true"></i>').
               replace('3', '<i class="fa fa-compass" aria-hidden="true"></i>').
               replace('4', '<i class="fa fa-erasor" aria-hidden="true"></i>').
               replace('5', '<i class="fa fa-calculator" aria-hidden="true"></i>');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="issues">1 2 3 4 5</div>
<div class="issues">2 3 4</div>
<div class="issues">1 </div>
<div class="issues">1 4 5</div>

因此，事实证明，我使用的生产服务器正在阻止代码加载。我必须创建一个延迟来加载脚本。谢谢大家的帮助。

function trigger(){
$('.issues').html(function(_, txt) {
    return txt.replace('1', '<i class='"fa fa-heartbeat text-danger fa-lg '" aria-hidden='"true'"></i>').
                         replace('2', '<i class='"fa fa-graduation-cap fa-lg'" aria-hidden='"true'"></i>').
                         replace('3', '<i class='"fa fa-line-chart text-info fa-lg'" aria-hidden='"true'"></i>').
                         replace('4', '<i class='"fa fa-balance-scale text-danger fa-lg'" aria-hidden='"true'"></i>').
                         replace('5', '<i class='"fa fa-plane text-success fa-lg'" aria-hidden='"true'"></i>');
});

}setTimeout(触发,3000)、

相关文章：