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

Question

I am trying to load a HTML page into a variable in Jquery, then replace a div element tag in it, so I can get my own id into the div. I am using this way to dynamically add more users in my web app, and then do a batch POST to the back end, and put the info into json.

Here is my html that I am loading.

info.html

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

I load this with jquery and I want to replace <div id="user"> with something

like <div id="user 1">

I have the following jquery script that has a counter to keep track of what number to append onto the div tag.

$(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.
        });

});

Any suggestions would be great thanks. Also, is the is the best way going about keeping track of how many times a new user is added(as in using a counter and keep track of how they are added, and then do the same when I click submit and create the json)?

Answer 1

.load() is asynchronous. make your changes in side callback.

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

Also $( "selector" ).load() is the syntax. So create a div and load content to it. // modified code structure

<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

Try an $.each() function for #user like this:

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