jQuery更改在console.log中工作的.each（）中name属性的值，但不更改页面源代码

Question

I am trying to change the name attribute of a cloned table row. Here is my code:

    var ipCount = 2;
$("#input_form").on("click", "#add_input_param", function() {
    $('#input_param tr').eq(1).clone().find('input').val('').end()
            .appendTo('#input_param > thead')
            .find('*[name]')
            .each(function() {
        console.log($(this).attr('name'));
        $(this).attr('name', 'new_name');
        console.log($(this).attr('name'));
    });
    ipCount++;
});

on the console it changed the name attr to new_name but not showing when I do Inspect Element on Chrome DevTools. This is the console:

    :ops1/6/1/1_param js.js:48
    new_name js.js:50
    :ops1/6/1/1_type js.js:48
    new_name js.js:50
    :ops1/6/1/1_required js.js:48
    new_name js.js:50
    :ops1/6/1/1_desc js.js:48
    new_name js.js:50
    :ops1/6/1/1_location js.js:48
    new_name 

HTML after click shows on DevTools:

    <input type="text" name=":ops1/6/1/1_param" class="ui-input-text ui-body-c">

I been trying to interate the name attribute but it doesn't seem to change when I do it.

My HTML table( the row was cloned from a cloned table) it might be the reason why it's not changing the name attr)

    <h4>
                        3.3.5 Input Parameters
                    </h4>
                    <table id="input_param" >
                        <thead>
                            <tr>
                                <th>Parameter</th>
                                <th>Data Type</th>
                                <th>Required</th>
                                <th>Brief description</th>
                                <th>Location in Request</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><input type="text" name=":ops1/6/1/1_param" /></td>
                                <td><input type="text" name=":ops1/6/1/1_type" /></td>
                                <td>
                                    <select id="required" name=":ops1/6/1/1_required">
                                        <option value="Mandatory" >Mandatory</option>
                                        <option value="Optional" >Optional</option>
                                        <option value="Conditional" >Conditional</option>
                                    </select>
                                </td>
                                <td><textarea name=":ops1/6/1/1_desc"></textarea></td>
                                <td>
                                    <select name=":ops1/6/1/1_location">
                                        <option value="Header" >Header</option>
                                        <option value="Body" >Body</option>
                                        <option value="Query_param" >Query Parameter</option>
                                        <option value="Resource_uri" >Resource URI</option>
                                    </select>
                                </td>
                            </tr>
                        </tbody>
                    </table>     
                    <input type="button" id="add_input_param" value="+ Add Input Parameter" data-inline="true" /><br />

Answer 1

$('table tr').appendTo('#foo').find('.bar')

doesn't find elements in '#foo' element, it will find elements that has classed '.bar' inside of 'table tr'. So, your chain is not that you want. You can write like that:

var ipCount = 2;
$("#input_form").on("click", "#add_input_param", function() {
    $('#input_param tr').eq(1).clone().find('input').val('').end()
            .appendTo('#input_param > thead')
            .find('#input_param > thead [name]')
            .each(function() {
                $(this).attr('name', 'new_name');
            });
    ipCount++;
});

Answer 2

<input type="text" name=":ops1/6/1/1_param" class="ui-input-text ui-body-c">

将是.eq(0) ，以及@MuratÇorlu所说的。