Search code examples
javascriptjqueryhtmlattr

jQuery: Changing 'id' with .attr('id', 'val') won't work

First of all, the code has been simplified and only contains the essential parts.

So I have the following HTML file (single_lesson.html):

<tr class="my_lessons">
    <td>
        <select name="my_von" id="my_von"></select>
    </td>
</tr>

I'm trying to change id of #my_von to #my_von1 with the following jQuery-code:

jQuery.get('single_lesson.html', function(my_html)
{
    jQuery(my_html).children().children('#my_von').attr('id', 'my_von1');
}, 'html');

It won't work and I have no idea why.

The line console.log(jQuery(my_html).children().children('#my_von')); gives the following array:

[select#my_von, prevObject: e.fn.init[7], context: undefined, jquery: "1.11.1", constructor: function, selector: ""…]

If I open this array there's another array called select#my_von. If I open this one there are several fields and id: "my_von" is one of them. The field id is there, so I see no reason why it won't change.

Solution

  • Thank you Arun P Johny for your comment. I didn't realize jQuery(my_html) is an object. I solved the problem by simply storing the object jQuery(my_html) as a variable and then storing its HTML contents as an other variable after changing id. My code is below:

    var my_html_jquery = jQuery(my_html);
my_html_jquery.children().children('#my_von').attr('id', 'my_von1');
my_html = my_html_jquery.html();