如何在jQuery中选择具有相同属性值的元素？

说我有这样的结构：

并且我想隐藏除了第一个之外具有相同属性的所有div，所以我得到：

现在我知道我可以这样做：

 $('[data-stuff=foo]:gt(0), [data-stuff=bar]:gt(0), [data-stuff=baz]:gt(0)').hide(); 

问题是， data-stuff的价值是动态生成的，是不可预测的。 我该怎么做才能完成这项任务？

编辑

DOM元素本身不一定相同，所以$ .unique（）在这里没有帮助。 同样重要的是，FIRST仍然是显示的，因此重新排序不会发生。

Answer 1

蛮力方式：

 var found = {}; $("[rel]").each(function(){ var $this = $(this); var rel = $this.attr("rel"); if(found[rel]){ $this.hide(); }else{ found[rel] = true; } }); 

Answer 2

这样的事情怎么样：

 $('div[rel]:visible').each(function(){ var rel = $(this).attr('rel'); $(this).nextAll('div[rel="'+rel+'"]').hide(); }); 

演示： http ： //jsfiddle.net/CsTQT/

Answer 3

首先， rel不用于存储数据。 根据W3C，rel描述了“从当前文档到href属性指定的锚点的关系。此属性的值是以空格分隔的链接类型列表。”

其次， rel只是和一个属性。 您真的想要使用data-* HTML5属性。 不要担心浏览器支持，它一直回到IE 66（可能是5）。

这可以通过JQuery $.data('name')函数访问。

可通过以下方式访问：

 $('div').filter(function(inputs){ return $(this).data('foo') === 'bar'; }).hide() 

Answer 4

这意味着：如果你选择第一个元素，你想隐藏每个兄弟; 所以使用JBrothersByAttr jquery插件，它是Mounawa3et منوعات Jquery插件的一部分：

 $('[data-stuff=foo]:eq(0)').brothersByAttr('data-stuff').hide(); $('[data-stuff=bar]:eq(0)').brothersByAttr('data-stuff').hide(); $('[data-stuff=baz]:eq(0)').brothersByAttr('data-stuff').hide(); 

演示： http ： //jsfiddle.net/abdennour/7ypEa/1/

说明： 1。选择第一个通道:eq(0)

  var jq= $('[data-stuff=foo]:eq(0)') 

2.通过JBrothersByAttr具有相同data-stuff attr值的其他元素：

  var brothers=jq.brothersByAttr('data-stuff') 

3.隐藏它

 brothers.hide()