Chọn tất cả các phần tử có CSS ​​cụ thể, sử dụng jQuery

Question

Làm cách nào để chọn tất cả các phần tử có thuộc tính CSS cụ thể được áp dụng, sử dụng jQuery? Ví dụ:

.Title 
{ 
    color:red; 
    rounded:true; 
} 

.Caption 
{ 
    color:black; 
    rounded:true; 
} 

Cách chọn theo thuộc tính có tên "làm tròn"?

Tên lớp CSS rất linh hoạt.

$(".Title").corner(); 
$(".Caption").corner(); 

Cách thay thế hai thao tác này thành một thao tác. Có thể một cái gì đó như thế này:

$(".*->rounded").corner(); 

Có cách nào tốt hơn để làm điều này không?

Answer 1

Bạn không thể (sử dụng bộ chọn CSS) chọn các phần tử dựa trên thuộc tính CSS đã được áp dụng cho chúng.

Nếu bạn muốn thực hiện việc này theo cách thủ công, bạn có thể chọn mọi phần tử trong tài liệu, lặp lại chúng và kiểm tra giá trị được tính của thuộc tính bạn quan tâm (điều này có thể chỉ hoạt động với các thuộc tính CSS thực) được tạo thành như rounded). Nó cũng sẽ chậm.

Cập nhật để đáp ứng với chỉnh sửa - group selectors:

$(".Title, .Caption").corner(); 

Answer 2

Đây là một chủ đề cũ hai năm, nhưng nó vẫn còn hữu ích với tôi vì thế nó có thể hữu ích cho người khác, có lẽ. Đây là những gì tôi đã kết thúc thực hiện:

var x = $('.myselector').filter(function() { 
    return this.style.some_prop == 'whatever' 
}); 

không phải là ngắn gọn như tôi muốn, nhưng tôi đã không bao giờ cần một cái gì đó như thế này ngoại trừ bây giờ, và nó không phải là rất hiệu quả để sử dụng chung dù sao, như tôi nhìn thấy nó.

Answer 3

Cảm ơn bạn, Bijou. Tôi đã sử dụng giải pháp của bạn, nhưng sử dụng jQuery .css thay vì javascript tinh khiết, như thế này:

var x = $('*').filter(function() { 
    return $(this).css('font-family').toLowerCase().indexOf('futura') > -1 
}) 

Ví dụ này sẽ chọn tất cả các yếu tố trong đó giá trị thuộc tính font-family chứa "Futura".

tính

Answer 4

Tuỳ chỉnh CSS không được thừa kế, vì vậy phải được áp dụng trực tiếp đến từng phần tử (ngay cả khi bạn sử dụng js để tự động thêm các thuộc tính, bạn nên làm điều đó bằng cách thêm một lớp), vì vậy ...

CSS

.Title 
{ 
    color:red; 
} 

.Caption 
{ 
    color:black; 
} 

HTML

Bạn không cần phải xác định một tròn: tài sản đúng chút nào hết. Chỉ cần sử dụng sự hiện diện của lớp 'tròn':

<div class='Title Rounded'><h1>Title</h1></div> 
<div class='Caption Rounded'>Caption</div> 

JS

jQuery('.Rounded').corner(); 

Answer 5

tương tự như Bijou của.Chỉ cần một chút cải tiến nhỏ:

$('[class]').filter(function() { 
    return $(this).css('your css property') == 'the expected value'; 
    } 
).corner(); 

Tôi nghĩ rằng sử dụng $ ('[lớp]') là tốt hơn:

• không cần phải cứng mã selector (s)
• sẽ không kiểm tra tất cả các phần tử HTML từng cái một.

Đây là example.

Answer 6

Đây là một sạch sẽ, dễ hiểu giải pháp:

// find elements with jQuery with a specific CSS, then execute an action 
$('.dom-class').each(function(index, el) { 
    if ($(this).css('property') == 'value') { 
     $(this).doThingsHere(); 
    } 
}); 

Giải pháp này là khác nhau vì nó không sử dụng góc, bộ lọc hoặc trả lại. Nó được cố ý thực hiện cho một đối tượng rộng lớn hơn của người dùng.

Những điều cần thay thế:

1. Thay thế ".dom-class" với chọn của bạn.
2. Thay thế thuộc tính CSS và giá trị bằng những gì bạn đang tìm kiếm.
3. Thay thế "doThingsHere()" bằng những gì bạn muốn thực thi trên phần tử được tìm thấy đó.