Question

在我的JSP站点上，我想复制一些html元素并重命名它们的属性以生成动态表单。目前，我的JavaScript代码如下：

function getTemplateHtml(templateType)
{
    <%-- Get current number of elements. --%>
    var len = $('.form-group').length;
    <%-- Clone the correct template. --%>
    var $html = $(".template-"+templateType).clone();
    <%-- Replace placeholders. --%>
    $html.find('[id="PLACEHOLDER.Type"]')[0].id="filters" + len + ".Type";
    $html.find('[name="PLACEHOLDER.Type"]')[0].name="filters[" + len + "].Type";
    $html.find('[id="PLACEHOLDER.Value"]')[0].id="filters" + len + ".Value";
    $html.find('[name="PLACEHOLDER.Value"]')[0].name="filters[" + len + "].Value";
    ...
    return $html.html();    
}

由于有20个属性，因此代码非常长且难以维护。有没有办法在整个.replace('PLACEHOLDER', 'filters' + len)元素上调用类似$hmtl的东西？

Answer 1

如果您的意思是您可以在问题中使用Type和Value的情况下具有20种不同的属性，是的，您可以轻松地循环执行此操作：

["id", "name"].forEach(function(prop) {
    $html.find('[' + prop + '*=PLACEHOLDER]').attr(prop, function() {
        var match = /PLACEHOLDER\.([A-Z]+)/i.exec(this[prop]);
        if (match) {
            this[prop] = "filters" + len + "." + match[1];
        }
    });
});

这会查找在PLACEHOLDER或id中带有name的所有元素，并用替换符更新id或name，并采用属性名称（ id或name中的“类型”或“值”等。

实时示例：

var len = 27;
var $html = $("#template").clone();
["id", "name"].forEach(function(prop) {
    $html.find('[' + prop + '*=PLACEHOLDER]').attr(prop, function() {
        var match = /PLACEHOLDER\.([A-Z]+)/i.exec(this[prop]);
        if (match) {
            this[prop] = "filters" + len + "." + match[1];
        }
    });
});
console.log($html.html());

<div id="template">
<input id="PLACEHOLDER.Type">
<input name="PLACEHOLDER.Type">
<input id="PLACEHOLDER.Value">
<input name="PLACEHOLDER.Value">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

如果我们可以假设id和name在同一个元素上，则会更简单：

$html.find('[id*=PLACEHOLDER]').attr("id", function() {
    var match = /PLACEHOLDER\.([A-Z]+)/i.exec(this.id);
    if (match) {
        this.id = this.name = "filters" + len + "." + match[1];
    }
});

这会查找在PLACEHOLDER或id中带有name的所有元素，并用替换符更新id或name，并采用属性名称（ id或name中的“类型”或“值”等。

实时示例：

var len = 27;
var $html = $("#template").clone();
$html.find('[id*=PLACEHOLDER]').attr("id", function() {
    var match = /PLACEHOLDER\.([A-Z]+)/i.exec(this.id);
    if (match) {
        this.id = this.name = "filters" + len + "." + match[1];
    }
});
console.log($html.html());

<div id="template">
<input id="PLACEHOLDER.Type">
<input name="PLACEHOLDER.Type">
<input id="PLACEHOLDER.Value">
<input name="PLACEHOLDER.Value">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

使用attribute starts with selector和attr(attributeName, function)，您可能可以执行类似以下操作：

$html.find('[name^="PLACEHOLDER"]').attr('name', function(i, existingName){
     return existingName.replace('PLACEHOLDER', 'filters[' + len +']');
});

我会完全摆脱id并改用class。管理动态ID几乎总是比它值得的麻烦更多

替换javascript / jquery中的占位符

2 个答案: