Javascript jQuery选择一个由Rails循环生成的HTML元素

我是Rails和jQuery的初学者。我在Rails应用程序中有一个视图，其中包含数据库中每个用户的图片。用户照片是使用.each循环和HTML元素生成的。我希望jQuery做的是：当我将鼠标移到其中一个HTML元素上时，我希望它扩展以包含一些内容。但我只希望它的内容扩展，而不是所有其他具有相同类名的内容！我该怎么做

以下是观点：

<ul class="thumbnails">
<% @users.each do |user| %>
    <li class="span2-thumb">
    <a href=<%= user_path(user) %> class="thumbnail">
      <img src=<%= user.photo_url(:thumb).to_s %>>
    </a>
  </li>

    <li class="span2-info hidden">
      <div class="thumbnail">
        <img src=<%= user.photo_url(:thumb).to_s %>>
        <p>
           Content...
        </p>
      </div>
    </li>

  <% end %>
<% end %>
</ul>

一个选项是为每个用户映像创建自定义类名。通过将user.id附加到类名，我可以毫无问题地完成这项工作。但是我有一个问题，我不能写一个脚本来识别每个唯一的类名

---

如有任何建议，我们将不胜感激。谢谢

给你。这应该起作用：

对不起，第一个答案很愚蠢。我想你应该把这两个切换的元素嵌套起来

将您的标记编辑为：

<li class="span2-thumb">
    <a href="#" class="thumb">
      <img src="path/to/img">
    </a>
    <div class="thumbnail hidden">
      <img src="path/to/img">
      <p>
         Content...
      </p>
    </div>
</li>

---

纯css版本——我尽量避免过度使用JS

.span2-thumb:hover .thumb {
  display: none;
}
.span2-thumb:hover .thumbnail {
  display: block;
}
.span2-thumb .thumbnail {
  display: none;
}

---

非常感谢。不幸的是，当我将鼠标移到每个元素上时，它似乎删除了每个元素。不确定它是否看到了最近的元素

$(function() {
    $('.span2-thumb').on('mouseenter mouseleave', function() {
        $(this).children().toggleClass('hidden');
    });
});

.span2-thumb:hover .thumb {
  display: none;
}
.span2-thumb:hover .thumbnail {
  display: block;
}
.span2-thumb .thumbnail {
  display: none;
}