javascript - jquery 在通过变量作为 id 追加后访问元素

Question

通过 ajax，我检索了一些 json 数据，将其制作为 html 并将其附加到我的页面。在这里我有一个问题。如果 id 是可变的，我无法通过 id 访问元素。

例如，http://jsfiddle.net/f8g5e/1/

<div id="123">Hello</div>
<div id="321">Bye</div>
<div id="out"></div>

$(function(){
   key = '123';
   $('#' + key).hide();
   $('#321').hide();
});

简单的事情是有效的! #123 和 #321 元素被隐藏。是的，这很明显。

但是，在我的项目中，当我将数据附加到页面时:

$('#123') //returns element
$('#' + key) //returns null

部分代码:

// generating data
var htmlData = '<div id="123">Greetings!</div><div id="321">Bye bye</div>';

// appending data   
$('#tweets').empty();
$('#tweets').append(htmlData);

我无法访问元素的可能原因是什么？谢谢。

更新不知道它在 JSFiddle 中是如何工作的，但是当我将我的 ID 更改为正确的名称时，它现在开始工作了。谢谢大家!下次，我会更加关注 w3c dom standarts ;) 新年快乐!

Answer 1

我能想到 $('#'+key) 不起作用的唯一原因是变量 key 未定义。

注意:根据 W3C 规范，您不应以数字开头 ID。但是，大多数浏览器都允许它，所以我怀疑这是导致您的问题的原因。

但是，如果您有两个具有相同 ID 属性的 div，那么 JavaScript 只会选择它找到的第一个——ID 应该是唯一的。如果发生这种情况，请改用类。