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, но когда я изменил свои идентификаторы на правильные имена, он начал работать сейчас.Спасибо всем!В следующий раз я уделю больше внимания стандартам w3c dom;) С Новым годом!

Answer 1

Единственная причина, по которой я могу думать, что $('#'+key) не будет работать, это то, что переменная key не определена.

Примечание: вы не должны начинать ID с номера в соответствии со спецификацией W3C.Однако большинство браузеров допускают это, поэтому я сомневаюсь, что это вызывает вашу проблему.

Однако, если у вас есть два div с одним и тем же атрибутом ID, тогда JavaScript выберет только первый найденный файл -Идентификаторы должны быть уникальными.Если это происходит, используйте вместо этого классы.

Answer 2

Вы можете сделать это:

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

или вы можете сделать это:

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