jQuery: Изменение 'id' с .attr ('id', 'val') не будет работать

Question

Прежде всего, код был упрощен и содержит только основные части.

Так у меня есть следующий HTML-файл (single_lesson.html):

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

Я пытаюсь изменить id из #my_von в #my_von1 со следующим JQuery-код:

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

It не будет работать, и я понятия не имею, почему.

---

Линия console.log(jQuery(my_html).children().children('#my_von')); дает следующий массив:

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

Если открыть этот массив существует другой массив называется select#my_von. Если я открою это, есть несколько полей, и один из них - id: "my_von". Поле id есть, поэтому я не вижу причин, почему он не изменится.

Answer 1

Спасибо Arun P Johny за ваш комментарий. Я не понимал, что объект jQuery(my_html). Я решил проблему, просто сохранив объект jQuery(my_html) в качестве переменной, а затем сохранил его содержимое HTML как другую переменную после изменения id. Мой код ниже:

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

Answer 2

Никогда не используйте children().children(), особенно с потенциально неизвестной структурой DOM (и при поиске ID так же быстро, как и она).

Обычная проблема - это несколько элементов верхнего уровня в результате получения или недействительны HTML, начиная с <. Наиболее простое решение, чтобы обернуть его в фиктивный элемент первого:

jQuery.get('single_lesson.html', function(my_html) 
{ 
     var $div = jQuery('<div>').html(my_html); 
     $div.find('#my_von').attr('id', 'my_von1'); 
     // Now do whatever you want to do with $div.html() or $div.children(); 
}, 'html');