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文件获取链接并使用Embedly API嵌入视频并显示缩略图。我最初用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，每个视频最初都是一个链接的唯一ID，我会转到链接的父级（具有唯一ID的div），并获得唯一的id属性，然后将缩略图附加到该div。但是，在浏览器中检查我的HTML代码后，缩略图不会被追加。我做错了什么，怎样才能得到我想要的东西？

Answer 1

问题就在于这一行：

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

应该是：

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

但是，$(this).parent()已经返回了您所追求的元素，因此不需要使用其ID进行的所有工作：

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

Answer 2

我怀疑这个不是你认为的那样，因为嵌入式创建了更多的html，所以在你试图导航到id时它可能没有达到你的目的认为应该在那里。

如果页面上有一些元素，我会在 id 周围发出警告以检查其值。

你也可以用一个显示选择器来调用parent（），所以如果embedly没有生成任何div，你可以添加父（'div'）。

你也不需要查找要追加的id，你可以直接从parent（），即parent（）。append（）来做。你可以用这种方式保存自己的选择器。

为什么我无法获取我的jQuery代码来正确构建我的HTML？

2 个答案: