为什么我不能让我的 jQuery 代码正确地构建我的 HTML？答案

【问题标题】：Why can't I get my jQuery code to correctly structure my HTML?为什么我不能让我的 jQuery 代码正确地构建我的 HTML？
【发布时间】：2011-03-14 22:55:14
【问题描述】：

我正在使用 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 创建了一个具有唯一 id 的 div，围绕着每个最初是链接的视频，我会转到链接的父级（具有唯一 id 的 div），并获得唯一的id 属性，然后将缩略图附加到该 div。但是，在浏览器中检查我的 HTML 代码后，没有附加缩略图。我做错了什么，我怎样才能得到我想要的？

【问题讨论】：

标签： jquery html ruby-on-rails ruby-on-rails-3 embedded-video

【解决方案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>" ...);

【讨论】：

【解决方案2】：

我的怀疑是 this 不是您认为的那样，因为嵌入正在创建更多的 html，因此您尝试导航到 id 的地方可能无法找到您想要的认为应该在那里。

如果页面上有一些元素，我会在 id 周围放置一个警报以检查其值。

您还可以使用要查找的内容的显式选择器调用 parent()，因此如果 embedly 不生成任何 div，您可以添加 parent('div')。

您也不需要查找要附加的 id，您可以直接从 parent() 中进行，即 parent().append()。这样可以为自己节省一个选择器调用。

【讨论】：