Câu hỏi Làm thế nào tôi có thể chọn một phần tử với nhiều lớp trong jQuery?


Tôi muốn chọn tất cả các phần tử có hai lớp a và b.

<element class="a b">

Vì vậy, chỉ có các yếu tố có cả hai các lớp học.

Khi tôi sử dụng $(".a, .b") nó mang lại cho tôi công đoàn, nhưng tôi muốn giao lộ.


1774
2018-06-24 22:28


gốc


Nó sẽ là tốt đẹp nếu bạn có thể xác định những gì công đoàn và giao lộ có nghĩa là cho chúng tôi newbs :) - Kolob Canyon
@KolobCanyon union và intersection là các khái niệm lý thuyết thiết lập cơ bản. Vì vậy, ví dụ một công đoàn sẽ là tất cả những người nói tiếng Pháp (bao gồm cả nam và nữ), trong khi một giao lộ sẽ là tất cả phụ nữ nói tiếng Pháp (không bao gồm tất cả những người không nói tiếng Pháp, và loại trừ tất cả những người không phải là phụ nữ). Các công đoàn và nút giao có thể được thực hiện với bất kỳ số lượng đặc điểm nào xác định từng bộ. en.wikipedia.org/wiki/Union_(set_theory)  en.wikipedia.org/wiki/Intersection_(set_theory) - Katharine Osborne
Tôi nghĩ bạn có nghĩa là hai bộ "phụ nữ" và "người nói tiếng Pháp", công đoàn sẽ là tất cả phụ nữ trên thế giới và tất cả những người nói tiếng Pháp trên thế giới, một bộ bao gồm cả những phụ nữ không nói Người đàn ông nói tiếng Pháp và Pháp. Giao lộ, như bạn đã viết, chỉ những phụ nữ nói tiếng Pháp. - Teemu Leisti


Các câu trả lời:


Nếu bạn muốn một giao lộ, chỉ cần viết các bộ chọn cùng nhau không có dấu cách ở giữa.

$('.a.b')

Vì vậy, đối với một phần tử có ID a với các lớp học b và c, bạn sẽ viết:

$('#a.b.c')

2293
2018-06-24 22:30



@Flater: Nó chỉ là vì lợi ích của ví dụ. Nhưng nó có thể hữu ích nếu các lớp học b và c được thêm động và bạn chỉ muốn chọn phần tử nếu nó có các lớp đó. - Sasha Chedygov
Aha, điểm tốt :-) Cho đến bây giờ tôi đã sử dụng .hasClass () nhưng đây là một cách ký hiệu tốt hơn. - Flater
Phương pháp chọn này cũng hoạt động cho CSS, v.d. .a.b {style properties} thấy: css-tricks.com/multiple-class-id-selectors - Chris Halcrow
@ Shimmy: Vâng. Một khoảng trống giữa hai bộ chọn có nghĩa là bạn đang tìm kiếm con cháu; I E. .a .b tìm kiếm các phần tử có lớp b đó là hậu duệ của một phần tử có lớp a. Vì vậy, một cái gì đó như div a sẽ chỉ trở lại a các yếu tố phía trong một div thành phần. - Sasha Chedygov
@AaA: Không đúng; nó đã được theo cách này kể từ khi bắt đầu của jQuery, bởi vì đó là cách CSS hoạt động. Dấu phẩy chọn các phần tử khớp với một trong các bộ chọn (nghĩ về nó như là một OR hợp lý), không phải cả hai, vì vậy nó không giống nhau (mặc dù tôi có thể thấy nó có thể gây nhầm lẫn như thế nào). - Sasha Chedygov


Bạn có thể làm điều này bằng cách sử dụng filter() chức năng:

$(".a").filter(".b")

147
2018-06-24 22:34



Sự khác biệt giữa câu trả lời này và câu trả lời được chấp nhận là gì? - Daniel Allen Langdon
@ Rice: Cái này sẽ chậm hơn một chút, bởi vì nó sẽ xây dựng một danh sách các đối tượng với lớp "a" đầu tiên, sau đó loại bỏ tất cả trừ các đối tượng có lớp "b", trong khi tôi làm điều này trong một bước. Nhưng nếu không, không có sự khác biệt. - Sasha Chedygov
Điều này làm việc cho tôi trong một trường hợp mà tôi đang tìm kiếm một lớp được định nghĩa là một biến, mà không làm việc với cú pháp trong ví dụ đầu tiên. ví dụ: $ ('. foo'). bộ lọc (biến). Cảm ơn - pac
@pac: $ ('. foo' + variable) nên đã thực hiện thủ thuật, nhưng tôi có thể thấy phương thức này sẽ rõ ràng hơn trong trường hợp đó. - Sasha Chedygov
Điều này cũng hiệu quả hơn nếu bạn đã tìm thấy .a's và cần phải lọc nhiều lần dựa trên các lớp tùy ý khác nhau cũng thuộc về bản gốc .a bộ. - Qix


Đối với vụ án

<element class="a">
  <element class="b c">
  </element>
</element>

Bạn sẽ cần phải đặt một không gian ở giữa .a và .b.c

$('.a .b.c')

97
2018-03-25 20:31



Thêm vào câu trả lời của bạn, tôi muốn biết cách truy cập cả b và c nếu trường hợp như sau: <element class = "a"> <element class = "b"> </ element> <element class = "c" > </ element> </ element>? Thông qua $ ('. A .b.c') cho kết quả sai. - Ipsita Rout
@IpsitaRout $('.a .b, .a .c') nên làm thủ thuật - Mr47
Trong ví dụ này, bộ chọn $('.a .c.b') cũng làm việc ? - DanFromGermany


Vấn đề bạn đang gặp phải là bạn đang sử dụng Group Selector, trong khi bạn nên sử dụng Multiples selector! Để cụ thể hơn, bạn đang sử dụng $('.a, .b') trong khi bạn nên sử dụng $('.a.b').

Để biết thêm thông tin, hãy xem tổng quan về các cách khác nhau để kết hợp bộ chọn herebelow!


Bộ chọn nhóm: ","

Chọn tất cả <h1> phần tử VÀ tất cả <p> phần tử VÀ tất cả <a> yếu tố:

$('h1, p, a')

Bộ chọn bội số: "" (không có ký tự)

Chọn tất cả <input> các yếu tố của type  text, với các lớp học code và red :

$('input[type="text"].code.red')

Bộ chọn con cháu: "" (dấu cách)

Chọn tất cả <i> yếu tố bên trong <p> yếu tố:

$('p i')

Bộ chọn con: ">"

Chọn tất cả <ul> các yếu tố là trẻ em ngay lập tức của một <li> thành phần:

$('li > ul')

Bộ chọn chị em liền kề: "+"

Chọn tất cả <a> các yếu tố được đặt ngay sau <h2> yếu tố:

$('h2 + a')

Tổng tuyển chọn: "~"

Chọn tất cả <span> các phần tử là anh chị em của <div> yếu tố:

$('div ~ span')

45
2018-01-20 22:24





$('.a .b , .a .c').css('border', '2px solid yellow');
//selects b and c
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="a">a
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>


30
2018-04-19 07:19





Giải pháp JavaScript của Vanilla: -

document.querySelectorAll('.a.b')


23
2018-01-29 18:02





Chỉ cần đề cập đến một trường hợp khác với phần tử:

Ví dụ. <div id="title1" class="A B C">

Chỉ loại: $("div#title1.A.B.C")


22
2017-12-14 16:15





Để có hiệu suất tốt hơn, bạn có thể sử dụng

$('div.a.b')

Điều này sẽ chỉ xem xét thông qua các phần tử div thay vì bước qua tất cả các phần tử html mà bạn có trên trang của mình.


16
2017-09-28 05:26





Bộ chọn nhóm

body {font-size: 12px; }
body {font-family: arial, helvetica, sans-serif;}
th {font-size: 12px; font-family: arial, helvetica, sans-serif;}
td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Trở thành điều này:

body, th, td {font-size: 12px; font-family: arial, helvetica, sans-serif;}

Vì vậy, trong trường hợp của bạn, bạn đã thử bộ chọn nhóm trong khi đó là giao lộ

$(".a, .b") 

thay vì sử dụng

$(".a.b") 

6
2018-05-17 13:57