Question

我不知道具体如何，但我试图在＆＃34;返回＆＃34;的结果之前和之后插入一个字符串。它会渲染一个或多个div。

它实际上在全球范围内，但我需要另一个内部，但它会更清楚一个例子。对不起，我在这方面做得还不够......

我的功能：

var fontsList = '<div class="list">' + Object.keys(families).map(function(familyName) {
    chaine = families[familyName].map(function(variants) {

        return '<div class="all-sub-fonts" style="font-family:'+ variants.postscriptName +';" onclick=\'fontUsed("' + variants.postscriptName + '", this)\'></div>'
    })

    return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '<div class="arrow-sub"></div></div>'+ chaine.join('') +'';
}).join('') + '</div>';

但是现在我需要将div从class="sub-all-fonts"包装成div

 var fontsList = '<div class="list">' + Object.keys(families).map(function(familyName) {
        chaine = families[familyName].map(function(variants) {
// <NEW DIV>
            return '<div class="all-sub-fonts" style="font-family:'+ variants.postscriptName +';" onclick=\'fontUsed("' + variants.postscriptName + '", this)\'><div class="variants-font">' + familyName + ' ' + variants.style + '</div></div>'
        })
// <END OF NEW DIV>

        return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '<div class="arrow-sub"></div></div>'+ chaine.join('') +'';
    }).join('') + '</div>';

Answer 1

保留chaine函数，然后将chaine生成的HTML包装在新div中。然后将新div添加到字符串中，而不是追加chaine的输出：

chaine = families[familyName].map(function(variants) {
// <NEW DIV>
            return '<div class="all-sub-fonts" style="font-family:'+ variants.postscriptName +';" onclick=\'fontUsed("' + variants.postscriptName + '", this)\'><div class="variants-font">' + familyName + ' ' + variants.style + '</div></div>'
        })
var htmlString = '<div class="MYNEWDIV">' + chaine.join('') + '</div>';
return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '<div class="arrow-sub"></div></div>'+ htmlString;

Answer 2

为什么不创建一个变量来存储div的begin和end？

示例：

var fontsList = '<div class="list">' + Object.keys(families).map(function(familyName) {
        chaine = families[familyName].map(function(variants) {
        var beginDiv = '<div> class='wrapper'>'
        var endDiv = '</div>'
        var middleDiv = '<div class="all-sub-fonts" style="font-family:'+ variants.postscriptName +';" onclick=\'fontUsed("' + variants.postscriptName + '", this)\'><div class="variants-font">' + familyName + ' ' + variants.style + '</div></div>'
            return beginDiv + middleDiv + endDiv
        })
        return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '<div class="arrow-sub"></div></div>'+ chaine.join('') +'';
    }).join('') + '</div>';

Answer 3

只需在第二次返回前插入chaineString = '<div class="box-sub-fonts">' + chaine.join('') + '</div>'。

然后将第二次返回更改为... + chaineString + ...

var fontsList = '<div class="list">' + Object.keys(families).map(function(familyName) {
    var chaine = families[familyName].map(function(variants) {
        return '<div class="all-sub-fonts" style="font-family:'+ variants.postscriptName +';" onclick=\'fontUsed("' + variants.postscriptName + '", this)\'></div>'
    });

    var chaineString = '<div class="box-sub-fonts">' + chaine.join('') + '</div>'

    return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '<div class="arrow-sub"></div></div>'+ chaineString +'';
}).join('') + '</div>';

通过这样做，您可以在将数组作为第二次返回的一部分返回之前将数组连接到字符串，这样您就可以使用它进行更多字符串连接。

当然，您也可以将div添加到第二个返回语句

return '<div class="font-box-name" style="font-family:'+ familyName +';" onclick=\'fontUsed("' + familyName + '", this)\'>' + familyName + '<div class="arrow-sub"></div></div><div class="box-sub-fonts">'+ chaine.join('') +'</div>';

在＆＃34;返回＆＃34;的结果之前和之后插入字符串;

3 个答案: