2010-09-03 27 views
7

Tôi đang cố tìm tất cả các phần tử gốc có kiểu CSS display:none. Tôi không thể làm cho nó hoạt động được. Đây là những gì tôi đã có:Cách chọn theo kiểu CSS trong jQuery?

var $parents = $(...).parents("[css=display:none]"); 

Trả lời

14

Nếu bạn muốn những người mà là thựcdisplay: none; (không chỉ có thể chứa trong display: none; khác), bạn có thể sử dụng .filter().css() để có được những bậc cha mẹ, như thế này :

var $parents = $(...).parents().filter(function() { 
        return $(this).css('display') == 'none'; 
       }); 

này được các bậc phụ huynh, sau đó lọc chúng để có được chỉ là những người có display: none; trên rằng mẹ cụ thể.

6

@Nick's solution là một phương pháp rất đơn giản và dễ hiểu để đạt được mục tiêu của bạn. Nó cũng có thể là phương pháp thực hiện tốt nhất. Tuy nhiên, vì lợi ích của sự hoàn chỉnh và thuận tiện (nếu bạn đang làm điều này rất nhiều), nó cũng có thể tạo bộ chọn của riêng bạn:

$.expr[':'].css = function(obj, index, meta, stack) { 
    var args = meta[3].split(/\s*=\s*/); 
    return $(obj).css(args[0]) == args[1]; 
} 

// Then we can use our custom selector, like so: 
$("#myElement").parents(":css(display=none)").show(); 

Ví dụ - http://jsfiddle.net/V8CQr/.

Xem thêm thông tin về tạo bộ chọn tùy chỉnh tại địa chỉ:

http://www.jameswiseman.com/blog/2010/04/19/creating-a-jquery-custom-selector/

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('a').parents('div[style*="display: none"], [style*="display:none"]').show(); 
     }); 
    </script> 
</head> 
<body> 
    <div class="Test" style="color: Red; display: none;"> 
     aaa <a href="#test">test</a><br /> 
    </div> 
    <div class="Test" style="color: Aqua;"> 
     bbb <a href="#test">test</a><br /> 
    </div> 
    <div class="Test" style="font-size: 15px; display: none;"> 
     ccc <a href="#test">test</a><br /> 
    </div> 
</body> 
</html> 
+0

để xem bản trình diễn trực tiếp, hãy xem liên kết này: http://jsfiddle.net/nanoquantumtech/xYdRy/ – Thulasiram

1

Bạn đang ở rất gần:

$(...).parents('[style*="display: none"]'); 

Lưu ý: đây thực hiện một tìm kiếm chuỗi con vào yếu tố giá trị thuộc tính vì vậy nó không tốt như giải pháp lọc $(this).css(...) được hiển thị ở trên.

docs.

Các vấn đề liên quan