Question

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

<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标准;）新年快乐！

Answer 1

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

注意：根据W3C规范，您不应该使用编号启动ID。但是，大多数浏览器允许它，所以我怀疑这会导致你的问题。

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

Answer 2

您可以执行以下操作：

$(function() {
  $('#321,#123').hide();
});

或者您可以这样做：

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

jifery在变量追加为id之后访问元素

2 个答案: