Cách chọn các phần tử có cùng giá trị thuộc tính trong jQuery?

Question

Nói rằng tôi có một cấu trúc như sau:

<div data-stuff="foo"></div> 
<div data-stuff="foo"></div> 
<div data-stuff="foo"></div> 
<div data-stuff="bar"></div> 
<div data-stuff="bar"></div> 
<div data-stuff="bar"></div> 
<div data-stuff="baz"></div> 

Và tôi muốn ẩn tất cả các divs với các thuộc tính như nhau ngoại trừ người đầu tiên, vì vậy tôi muốn nhận được:

<div data-stuff="foo"></div> 
<div data-stuff="bar"></div> 
<div data-stuff="baz"></div> 

Bây giờ tôi biết tôi chỉ có thể làm điều này:

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

Vấn đề là giá trị của data-stuff được tạo động và không thể đoán trước. Tôi có thể làm gì để hoàn thành nhiệm vụ này?

EDIT

Các yếu tố DOM mình không nhất thiết phải giống nhau, do đó $ .unique() sẽ không giúp đỡ ở đây. Nó cũng quan trọng là FIRST là một trong những vẫn còn hiển thị, do đó, sắp xếp lại không thể xảy ra.

Answer 1

Các brute force cách:

var found = {}; 

$("[rel]").each(function(){ 
    var $this = $(this); 
    var rel = $this.attr("rel"); 

    if(found[rel]){ 
     $this.hide(); 
    }else{ 
     found[rel] = true; 
    } 
}); 

Answer 2

Làm thế nào về một cái gì đó như thế này:

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

DEMO: http://jsfiddle.net/CsTQT/

Answer 3

Thứ nhất, rel không được sử dụng để lưu trữ dữ liệu. Theo W3C, rel mô tả "mối quan hệ từ tài liệu hiện tại đến neo được chỉ định bởi thuộc tính href. Giá trị của thuộc tính này là danh sách các loại liên kết được phân cách bằng dấu cách."

Thứ hai, rel chỉ là một thuộc tính trên <a> và <link>. Bạn thực sự muốn sử dụng thuộc tính HTML5 data-*. Đừng lo lắng về hỗ trợ trình duyệt, nó hoạt động tất cả các cách trở lại IE 66 (có thể là 5).

Điều này sẽ có thể truy cập được qua chức năng JQuery $.data('name').

<div data-foo="bar"></div> 

sẽ thể truy cập thông qua:

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

Answer 4

Đó là phương tiện: nếu bạn chọn phần tử đầu tiên, bạn muốn ẩn mỗi anh em; Vì vậy, sử dụng JBrothersByAttr jquery plugin mà là một phần của Mounawa3et منوعات Jquery plugin:

$('[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(); 

Demo:http://jsfiddle.net/abdennour/7ypEa/1/

Giải thích: 1. chọn đầu tiên qua :eq(0)

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

2.chọn các yếu tố khác mà có cùng giá trị của data-stuff attr qua JBrothersByAttr:

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

3.Hide nó

brothers.hide()