1

我需要使用 jQuery 来处理我在页面上显示的一组添加了 html5 数据属性的图像。我将如何获取所有具有它们的图像的 value1 和 value2 的数据值，但忽略任何没有的图像。换句话说，我需要循环浏览页面上的所有图像以查找这些属性的存在。

这是显示图像的代码：

<% @pictures.each do |picture| %>
  <%= link_to image_tag(picture.photo.url(:full),  
              :class => "picture_list_item",
              :data => {:value1 => picture.value1, :value2 => picture.value2}, 
              :id => "picture_" + picture.id.to_s),
              picture_path(:id => picture.id) %>
<% end %>
4

3 回答 3

2

jQuery 应该让这一切变得非常轻松。

$("img[data]").each(function(){
    //do something with each individual image.
});

或者只是这样：

$("img[data]").doSomething();
//doSomething to all.

这应该选择所有具有数据属性的图像。您可以一次处理所有这些，也可以一次.each()处理选定的图像。

这是一个要演示的小提琴：http: //jsfiddle.net/SLdk4/1/

于 2012-06-07T21:09:20.520 回答
0

我建议您添加一个代表每个值的类，然后您可以使用类选择器来操作它们。

于 2012-06-07T21:09:41.963 回答
0 
$('#parent img[data]').each(function(){
       var data = $(this).attr('data').split(',');
       var data_1 = data[0];                         // retrieve first data
       var data_2 = data[1];                         // retrieve second data
       console.log( data_1 +' '+ data_2 );           // or use 'alert' to test
});

jsFiddle 演示

.each()
.attr()
.split()

于 2012-06-07T21:15:06.153 回答