jQuery：使用 .attr('id', 'val') 更改 'id' 将不起作用

Question

首先，代码已经简化，只包含必要的部分。

所以我有以下 HTML 文件 (single_lesson.html):

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

我正在尝试使用以下 jQuery 代码将 #my_von 的 id 更改为 #my_von1：

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

它不起作用，我不知道为什么。

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

切勿使用 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');

Answer 2

感谢 Arun P Johny 的评论。我没有意识到 jQuery(my_html) 是一个对象。我通过简单地将对象 jQuery(my_html) 存储为变量，然后在更改 id 后将其 HTML 内容存储为另一个变量来解决该问题。我的代码如下：

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

jQuery：使用 .attr('id', 'val') 更改 'id' 将不起作用

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

html

javascript

jquery

attr