Question

我正在尝试将一个HTML页面加载到Jquery中的变量中，然后在其中替换div元素标记，这样我就可以将自己的id添加到div中。我使用这种方式在我的Web应用程序中动态添加更多用户，然后对后端执行批量POST，并将信息放入json。

这是我正在加载的html。

在info.html

 <div id="user">
     <label>name</label>
     <input type="text" name="name">
     <br>
     <label>email</label>
     <input type="text" name="email">
      <br>
 </div>

我用jquery加载它，我想用某些东西替换<div id="user">

喜欢<div id="user 1">

我有以下jquery脚本，它有一个计数器来跟踪要附加到div标签上的数字。

$(document).ready(function(){
    var make_counter = (function(){
        var count = 0;
        return function(){
            count++;
            return count;
        };
    });
    var _counter = make_counter();
    $("#add").click(function(){
        var counter = _counter();
        var content = $('<div>').load("static/info.html"); //using python flask 
        console.log(typeof(content)); //is of object type
        console.log(typeof(content.html())); //is of type string
        console.log(content.html());//shows up as an empty string
        console.log(content);//prints out the object
        content = content.html().replace('<div id="user ">','<div id="user "'+counter+'>'); // doesn't work. 
        $("#add_div").append(content); //appends correctly if I remove the above line, but all divs have the some id.
        });

});

任何建议都会非常感谢。此外，这是跟踪新用户添加次数的最佳方式（如使用计数器并跟踪它们的添加方式，然后在单击提交并创建json时执行相同操作）？

Answer 1

.load（）是异步的。在侧面回调中进行更改。

.load("..",function(){
// your changes
});

$( "selector" ).load()也是语法。因此，创建一个div并加载内容。 //修改过的代码结构

<div id"content"></div>

$(document).ready(function(){
    var make_counter = (function(){
        var count = 0;
        return function(){
            count++;
            return count;
        };
    });
    var _counter = make_counter();
    $("#add").click(function(){
        var counter = _counter();
        $("#content").load("static/info.html",function(){
             content = $("#content").html().replace('<div id="user ">','<div id="user "'+counter+'>');  
             $("#add_div").append(content); 
}); //using python flask 

        });

});

Answer 2

使用JavaScript，你可以使用.attr（）方法来定位id，然后像这样设置它的值：

$("#content").attr("id", "user_" + counter);

Answer 3

为#user尝试$ .each（）函数，如下所示：

$('#user').each(function(indexNumber){
  $(this).replace('<div id="user'+indexNumber+'"></div>');
});

使用jquery在html中查找和替换元素

3 个答案: