Làm cách nào tôi có thể chọn một phần tử có nhiều lớp trong jQuery?

2061

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

<element class="a b">

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

Khi tôi sử dụng $(".a, .b")nó mang lại cho tôi sự kết hợp, nhưng tôi muốn giao lộ.

jquery jquery-selectors

— Mladen
nguồn

2

Sẽ thật tuyệt nếu bạn có thể định nghĩa sự hợp nhất và giao lộ có ý nghĩa gì đối với chúng tôi newbs :)

— Hẻm núi Kolob

10

@KolobCanyon union và ngã tư là những khái niệm lý thuyết tập hợp cơ bản. Vì vậy, ví dụ, một liên minh 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 điểm sẽ là tất cả phụ nữ nói tiếng Pháp (loại trừ 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ữ). Liên hiệp và giao điểm có thể được thực hiện với bất kỳ số lượng đặc điểm xác định mỗi bộ. vi.wikipedia.org/wiki/Union_(set_theory) vi.wikipedia.org/wiki/Intersection_(set_theory)

— Katharine Ostern

6

Tôi nghĩ bạn có nghĩa là trong 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ả phụ nữ không nói Đàn ông nói tiếng Pháp và tiếng Pháp. Giao lộ là, như bạn đã viết, chỉ những người phụ nữ nói tiếng Pháp.

— Teemu Leisti

2627

Nếu bạn muốn chỉ khớp các phần tử với cả hai lớp (một giao điểm, như logic AND), chỉ cần viết các bộ chọn với nhau mà không có khoảng trắng ở giữa:

$('.a.b')

Thứ tự không liên quan, vì vậy bạn cũng có thể trao đổi các lớp:

$('.b.a')

Vì vậy, để khớp với một divphần tử có ID của acác lớp bvà c, bạn sẽ viết:

$('div#a.b.c')

(Trong thực tế, rất có thể bạn không cần phải có được cụ thể đó và bản thân một bộ chọn ID hoặc lớp thường là đủ : $('#a').)

— Sasha Chedygov
nguồn

9

@Flater: Đó chỉ là vì lợi ích của ví dụ. Nhưng nó có thể hữu ích nếu các lớp bvà 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

3

Aha, điểm hay :-) Cho đến bây giờ tôi sẽ sử dụng .hasClass () nhưng đây là cách ký hiệu tốt hơn.

— Flater

4

Phương pháp lựa chọn này cũng hoạt động đối với CSS, ví dụ: .ab {thuộc tính phong cách} xem: css-tricks.com/mult

— Chris Halcrow

30

@Shimmy: Vâng. Khoảng trắng giữa hai bộ chọn có nghĩa là bạn đang tìm kiếm con cháu; tức là .a .btìm kiếm các phần tử với lớp blà hậu duệ của một phần tử với lớp a. Vì vậy, một cái gì đó như div asẽ chỉ trả lại acác yếu tố bên trong một divyếu tố.

— Sasha Chedygov

2

@AaA: Điều đó không chính xác; Đó là cách này kể từ khi bắt đầu 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 hai bộ chọn (nghĩ rằng nó là OR HOẶC), không phải cả hai, vì vậy nó không giống nhau (mặc dù tôi có thể thấy điều đó có thể gây nhầm lẫn).

— Sasha Chedygov

174

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")

— Jamie tình yêu
nguồn

16

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ì?

— Sông Vivian

49

@Rice: Cái này sẽ chậm hơn một chút, vì nó sẽ xây dựng một danh sách các đối tượng có lớp "a" trước, sau đó loại bỏ tất cả trừ những đối tượng có lớp "b", trong khi tôi thực hiện đ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

5

Điều này làm việc cho tôi trong một trường hợp nơi tôi đang tìm kiếm một lớp được định nghĩa là một biến, nó không hoạt động với cú pháp trong ví dụ đầu tiên. ví dụ: $ ('. foo'). bộ lọc (biến). Cảm ơn

— pac

7

@pac: $ ('. foo' + biến) 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

6

Điều này cũng hiệu quả hơn nếu bạn đã tìm thấy .avà cần 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ộ ban đầu .a.

— Qix - MONICA ĐƯỢC PHÂN BIỆT

123

Đối với trường hợp

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

Bạn sẽ cần đặt một khoảng trống ở giữa .avà.b.c

$('.a .b.c')

— juanpaulo
nguồn

Thêm vào câu trả lời của bạn, tôi muốn biết làm thế nào để 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" > </ phần tử> </ phần tử>? Qua $ ('. A .b.c') cho kết quả sai.

— Tuyến đường Ipsita

Trong ví dụ này, bộ chọn $('.a .c.b')cũng sẽ hoạt động chứ?

— Daniel W.

Vâng, như thứ tự không quan trọng.

— Zim84

$('.a > element')

— Alex

63

Vấn đề bạn gặp phải là bạn đang sử dụng a Group Selector, trong khi bạn nên sử dụng a 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 các công cụ chọn herebelow!

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

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

$('h1, p, a')

Công cụ chọn nhiều: "" (không có ký tự)

Chọn tất cả các <input>thành phần của type text, với các lớp codevà red:

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

Bộ chọn Hậu duệ: "" (dấu cách)

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

$('p i')

Công cụ chọn con: ">"

Chọn tất cả các <ul>phần tử là con ngay lập tức của một <li>phần tử:

$('li > ul')

Công cụ chọn anh chị em liền kề: "+"

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

$('h2 + a')

Tổng tuyển chọn anh chị em: "~"

Chọn tất cả các <span>yếu tố là anh em ruột của <div>các yếu tố:

$('div ~ span')

— John Slegers
nguồn

38

$('.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>

Mở rộng đoạn trích

— người dùng2298171
nguồn

26

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

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

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

— macio.Jun
nguồn

26

Giải pháp Vanilla JavaScript: -

document.querySelectorAll('.a.b')

— Salman von Abbas
nguồn

20

Để 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 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.

— Tejas Shah
nguồn

9

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 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 điểm

$(".a, .b")

thay vì sử dụng cái này

$(".a.b")

— Surya R Praveen
nguồn

4

Bạn không cần jQueryđiều này

Trong Vanillabạn có thể làm:

document.querySelectorAll('.a.b')

— Sandwell
nguồn

Đúng vào năm 2018, nhưng không phải câu hỏi này đã được hỏi vào năm 2009

— Michiel

3

mã của bạn $(".a, .b")sẽ hoạt động cho nhiều yếu tố bên dưới (cùng một lúc)

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

nếu bạn muốn chọn phần tử có cả a và b cả hai lớp <element class="a b">hơn là sử dụng js mà không hôn mê

$('.a.b')

— Savan
nguồn

2

Bạn có thể sử dụng getElementsByClassName()phương pháp cho những gì bạn muốn.

var elems = document.getElementsByClassName("a b c");
elems[0].style.color = "green";
console.log(elems[0]);

<ul>
  <li class="a">a</li>
  <li class="a b">a, b</li>
  <li class="a b c">a, b, c</li>
</ul>

Mở rộng đoạn trích

Đây là giải pháp nhanh nhất cũng có. bạn có thể thấy một tiêu chuẩn về điều đó ở đây .

— bahman Parsamanesh
nguồn

1

var elem = document.querySelector (". ab");

— Karim Ali
nguồn