Question

所以我创建了这个数据库，现在他们想要添加问题，我认为只需分配值就可以了。所以现在我有一组<td class="issues">输出这些值。

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

现在我尝试分配字体真棒标签，用字体图标替换每个号码，即：线1将是<i class="fa fa-heartbeat" aria-hidden="true"></i>

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

＆＃13;

    
      $( ".issues" ).contents().filter(function(){
          return this.nodeType === 3;
        });

＆＃13;

<!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>

＆＃13;

修改

我的表：

<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>

Answer 1

要执行此操作，我们必须检查word的每个issues，以便我们将这些字词包含在span中，以便您可以轻松阅读这些字词，

检查代码段希望这就是您想要的。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

Answer 2

好的，这是我解决问题的方法：

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

See the live preview here.

Answer 3

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

＆＃13;

$('.issues').each(function() {
  $(this).html($(this).text().trim().split(' ').map(function(e) {
    return '<i class="fa fa-' + e + '" aria-hidden="true">Icon' + e + ' </i>';
  }))
})

＆＃13;

<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>

＆＃13;

Answer 4

根据您的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>

Answer 5

因为事实证明我正在使用的生产服务器阻止了代码的加载。我不得不为它加载脚本创建一个延迟。感谢所有帮助人员。

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（trigger，3000）;

替换列文本值

5 个答案: