JQuery中的格式字符串

format string in JQuery

本文关键字：字符串 格式 JQuery      更新时间：2023-11-26

我想格式化表中显示的字符串，即每个字符具有不同字体大小的AbcDeF。不同行中的每个字符串都将具有不同的模式，这是由Json格式的字符串传递的向量决定的，即['abcde'，[1，2]]表示字符串"abcde"中的字母"b"answers"c"在最终显示中将使用不同的字体大小/颜色。这意味着字符串的每个模式都是动态分配的。

我已经根据10比特的答案修改了原始代码，除了所有字符串只由最后一个字符串格式向量格式化外，所有代码都能很好地工作，代码的结果在fiddle上，

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

通过仔细阅读.each（）函数的文档，我发现问题在于setter函数，即.css（），作用于匹配元素的整个集合，在本例中为第1列中的所有字符串，并使用为最后一行指定的模式进行格式化。我找不到一个解决方案来使用指定的特定模式单独处理每一行的回调函数。有什么建议吗？

你应该用一些html标签包装每个字母：

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>

编辑：这里代码中的问题是$('#display_1 td.1').each的行——它总是引用所有的td。这意味着，在$.each(json_data的第三次迭代中，它还引用了前面的2行，因为它们都具有类.1。

相关文章：