Formatzeichenfolge in JQuery

Question

Ich möchte Zeichenfolgen formatieren, die in einer Tabelle angezeigt werden, z. B. AbcDeF mit unterschiedlicher Schriftgröße für jedes Zeichen. Jede Zeichenfolge in einer anderen Zeile hat ein anderes Muster, das durch einen Vektor bestimmt wird, der mit der Zeichenfolge im Json-Format übergeben wird, dh ['abcde', [1,2]] gibt den Buchstaben "b" und "c" in der Zeichenfolge "abcde" an. wird in der endgültigen Anzeige in einer anderen Schriftgröße/Farbe angezeigt. Dies bedeutet, dass jedes Muster einer Zeichenfolge dynamisch zugewiesen wird.

Ich habe Original-Code geändert basierend auf tenbits' Antwort und alles funktioniert gut, außer alle Saiten nur vom letzten Format-String-Vektor formatiert, Code mit den Ergebnissen an der Geige,

https://fiddle.jshell.net/wrwhxdd4/7/

Durch sorgfältiges Lesen das Dokument der .each() - Funktion, fand ich das Problem ist, dass die Setter-Funktion, dh .css() wirkt sich auf die gesamte Sammlung von passenden Elementen, in diesem Fall alle Zeichenfolgen in Spalte 1 und formatiert mit dem Muster für die letzte bestimmt Reihe. Ich kann keine Lösung finden, Callback-Funktion für jede Zeile einzeln mit dem spezifischen zugewiesenen Muster arbeiten. Irgendwelche Vorschläge?

Answer 1

Sie sollten jeden Buchstaben mit einigen HTML-Tag Wrapp:

var json_data = [['hello', [1,4]], ['Hello', [0,3]], ['HELLO', [2,3]]]; 
 

 
generateTable(json_data); 
 

 
function generateTable(arr){ 
 
    $('#my-table').html('<tr><th>col1</th><th>col2</th><tr>'); 
 
    $.each(arr, function(index, val) { 
 
     var str = val[0]; 
 
     var pattern = val[1]; 
 
     var html = colorizeLetters(str, pattern); 
 
     var $row = $('<tr>'); 
 
     var $cell1 = $('<td class="1">').html(html); 
 
     var $cell2 = $('<td>').html(pattern.join(', ')); 
 

 
     $row.append($cell1).append($cell2).appendTo('#my-table'); 
 
    }); 
 
} 
 

 
function randomColor(){ 
 
    return "#"+((1<<24)*Math.random()|0).toString(16); 
 
} 
 

 
function colorizeLetters(text, indexes) { 
 
    return text.split('').reduce(function(html, letter, i){ 
 
     if (indexes != null && indexes.indexOf(i) === -1) 
 
      return html + letter; 
 

 
     var c = '<font color="' + randomColor() + '">' + letter + "</font>"; 
 
     return html + c; 
 
    }, ""); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='my-table'></table>

EDIT: Das Problem in Ihrem Code here ist die Linie mit $('#display_1 td.1').each - es immer alle td verweist. Das heißt, bei der dritten Iteration von $.each(json_data werden auch die vorherigen 2 Zeilen referenziert, da sie alle die Klasse .1 haben.