Question

我有一段看起来像这样的HTML：

<div class="search_container">
    <input id="keywords_0_keyword_names" name="keywords[0][keyword_names]" type="text">
    <select id="keywords_0_keyword_conditions" name="keywords[0][keyword_conditions]">
        <option value="is">is</option>
        <option value="is not">is not</option>
        <option value="is like">is like</option>
    </select>
    <input id="keywords_0_keyword_values" name="keywords[0][keyword_values]" type="text">
</div>

我想克隆它，然后修改id和name属性以保持1而不是0：

var next_index = 1;
var $container = $(".search_container");
var $new_container = $container.clone();
$new_container.find( $( "input[id^='keywords_'],select[id^='keywords_']" ) ).each(function(){
    $(this).attr("id").replace(/\d/,next_index);
    $(this).attr("name").replace(/\d/,next_index);
})
$container.parent().append($new_container); // form-group div which stores all the search containers

问题是，似乎克隆的id和name属性没有永久更改，因为当我加载网页时，克隆的html仍然保持值0而不是1。

我可能做错了什么？

Answer 1

您的代码中有两个错误。

使用.find()时，不应在选择器上包含jQuery包装器。请改用.find("input[id^='keywords_'],select[id^='keywords_']")。

您还需要将新属性应用于元素，因为replace会返回一个字符串。

Fiddle

var next_index = 1;
var $container = $(".search_container");
var $new_container = $container.clone();
$new_container.find("input[id^='keywords_'],select[id^='keywords_']")
              .each(function(){
    // Get new attributes
    var new_id = $(this).attr("id").replace(/\d/,next_index);
    var new_name = $(this).attr("name").replace(/\d/,next_index);
    // Apply new attributes
    $(this).attr('id',new_id);
    $(this).attr('name',new_name);
})
$container.parent().append($new_container);

jquery：修改克隆的属性

1 个答案: