Почему я не могу заставить свой код jQuery правильно структурировать мой HTML?

Question

Я пишу приложение с Ruby on Rails, jQuery и Embedly API.Я пишу частичное видео следующим образом:

<%= div_for video do %>

<%= link_to 'video', video.video_url, :class => 'oembed' %>

<% end %>

И отображаю это частичное в представлении index:

<div id ='video_div'>
  <%= render @videos %>
</div>

Затем мой файл application.js берет ссылку и использует EmbedlyAPI для встраивания видео и отображения миниатюр.Сначала я скрываю видео с помощью CSS, и я хочу, чтобы каждое видео с соответствующим миниатюром находилось в отдельном элементе div.Это означает, что я хочу, чтобы каждая пара видео / миниатюры находилась в своем собственном элементе div, чтобы я могла расположить миниатюру непосредственно над видео.Я попытался сделать это:

$('a.oembed').embedly({maxWidth:300,'method':'replace'}).bind('embedly-oembed', function(e, oembed){ 
    var id = $(this).parent().attr('id');
    $(id).append($("<img>", { src: oembed.thumbnail_url, width:200 }));
});

Я думаю, что поскольку div_for встроенный ruby ​​создает div с уникальным идентификатором, окружающим каждое видео, которое изначально было ссылкой, я бы пошел к родителю ссылки (div с уникальным идентификатором) и получите атрибут уникального идентификатора, а затем добавьте миниатюру к этому div.Однако после проверки моего HTML-кода в браузере миниатюра не добавляется.Что я делаю не так, и как я могу получить то, что хочу?

Answer 1

Я подозреваю, что либо это - это не то, что вы думаете, а то, что embedly создает больше html, поэтому, когда вы пытаетесь перейти к идентификатору, оно может не достичь того, что вы думаете должен быть там.

Если у вас есть несколько элементов на странице, я бы поставил предупреждение вокруг id , чтобы проверить его значение.

Вы также можете вызвать parent () с помощью явного селектора, что нужно найти, поэтому, если embedly не генерирует div, вы можете добавить parent ('div').

Вам также не нужно искать идентификатор для добавления, вы можете сделать это прямо из parent (), то есть parent (). Append (). Таким образом вы сохраняете вызов селектора.

Answer 2

Похоже, проблема в этой строке:

 $(id).append($("<img>", { src: oembed.thumbnail_url, width:200 }));

Должно быть:

$('#' + id).append($("<img>", { src: oembed.thumbnail_url, width:200 }));

Однако $(this).parent() уже возвращает элемент, который вы ищете, поэтому вся работа, которую вы делаете с его идентификатором, не нужна:

$(this).parent().append("<img>" ...);