如何替换jQuery DOM元素中的字符串

empz 发表于 Dev

开始

我需要从jQuery ajax响应构建HTML。我不喜欢在JavaScript中嵌套丑陋的字符串，也不想使用胡须或任何其他模板化脚本。

因此，我采用了一种带有显示的HTML模板的方法：没有一个像下面这样：

<div id="message-template" class="message-tile" style="display: none;">
    <div class="profile-thumb"><img src="{{thumb-url}}" width="48" height="48" alt="{{person-name}}" /></div>
    <div class="message-data">
        <div class="message-info">
            <div class="sender-name">
                <a href="{{person-url}}">{{person-name}}</a>
            </div>
            <div class="posted-to">
                To <a href="{{posted-to-url}}">{{posted-to-title}}</a>
            </div>
        </div>
        <div>{{message-body}}</div>
    </div>
</div>

我希望能够用json对象中的实际值替换{{}}之间的字符串。假设这是在jQuery.ajax onSuccess事件上调用的函数：

function createNewElement(jsonObj) {
    var $clone = $('#message-template').clone();
    $clone.replaceString("{{person-name}}", jsonObj.personName);
    $clone.replaceString("{{thumb-url}}", jsonObj.thumbUrl);
    $clone.replaceString("{{person-url}}", jsonObj.personUrl);
    // etc
    $("#target-container").append($clone);
}

我发明了replaceString方法，但是有类似的东西吗？还是我需要使用find（）遍历每个子元素？

威尔默

实际上，您可以<script type = "text/template">用来创建自己的模板，这样它就不会在您的页面上呈现：

<script id="message-template" type = "text/template">

    <div class="message-tile" style="display: none;">
        <div class="profile-thumb"><img src="{{thumb-url}}" width="48" height="48" alt="{{person-name}}" /></div>
        <div class="message-data">
            <div class="message-info">
                <div class="sender-name">
                    <a href="{{person-url}}">{{person-name}}</a>
                </div>
                <div class="posted-to">
                    To <a href="{{posted-to-url}}">{{posted-to-title}}</a>
                </div>
            </div>
            <div>{{message-body}}</div>
        </div>
    </div>

</script>

这是您替换值的方法：

function createNewElement(jsonObj) {
    var $clone = $('#message-template').html();
    $clone = $clone.replace("{{person-name}}", jsonObj.personName)
                   .replace("{{thumb-url}}", jsonObj.thumbUrl)
                   .replace("{{person-url}}", jsonObj.personUrl);
    // etc
    $("#target-container").append($clone);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。