替换动态生成的文本元素

Replace dynamically generated text elements

本文关键字：文本 元素 动态 替换      更新时间：2024-01-04

我正在编写一些使用动态生成图的代码。所有这些图在y轴上都有图例。现在我的目标是检查最长的图例字符串的长度，如果最长的字符串大于20个字符，我只想显示每个字符串的第一个字符。

通过下面的代码，我实现了可以提醒所需的缩短字符串；但我现在不知道如何用这些新字符串更改文本。

var textLengthArray = [];
var labelStrings = domContainer.find(" g > .brm-y-direction > .tick > text");
labelStrings.each(function() {
    textLengthArray.push($(this).text());
});
var longestString = textLengthArray.sort(function(a, b) {
    return b.length - a.length;
})[0];
if (longestString.length >= 20) {
    $("g.tick text").css("font-size", "9pt");
    var offsetLeft = longestString.length * 3.7;
    textLengthArray.map(function(sub) {
        var subString = sub.substring(0, 6);
        alert(subString);
    });
};

我试过这样的东西：

$(labelStrings).replaceWith(subString)

有了这个，我就完全没有图例了，因为我已经用新字符串替换了整个文本标记及其所有属性。

那么，有没有什么方法可以完全不接触标签及其值，只需在开始和结束标签之间更改文本？

提前感谢！

某事。像这样？

var $nodes = domContainer.find(" g > .brm-y-direction > .tick > text");
var longestLength = 0;
$nodes.each(function(){
    longestLength = Math.max(longestLength, $(this).text().length);
});
if(longestLength >= 20){
    $("g.tick text").css("font-size", "9pt");
    var offsetLeft = longestLength * 3.7;
    $nodes.each(function(){
        var $this = $(this);
        var text = $this.text();
        var substr = text.substr(0, 6);
        console.log(substr);
        $this.text(substr);
    });
}

这是你在进入SO之前应该研究谷歌的基础，无论如何你都可以使用$(labelStrings).html(subString)或$(labelStrings).text(subString)-它们都只会改变标签之间的内部内容

相关文章：