Làm cách nào tôi có thể chọn mục có lớp trong DIV?

142

Tôi có HTML sau:

<div id="mydiv">
  <div class="myclass"></div>
</div>

Tôi muốn có thể sử dụng bộ chọn chọn bên trong div, nhưng cụ thể cho vùng mydivchứa. Làm thế nào tôi có thể đạt được điều này với jQuery?

— Shechter Idan
nguồn

285

Thử:

$('#mydiv').find('.myclass');

Bản demo của Fiddle .

Hoặc là:

$('.myclass','#mydiv');

Bản demo của Fiddle .

Hoặc là:

$('#mydiv .myclass');

Bản demo của Fiddle .

Người giới thiệu:

Tốt để học hỏi từ các find()tài liệu:

Các phương thức .find () và .children () tương tự nhau, ngoại trừ việc phương thức sau chỉ di chuyển một cấp xuống cây DOM.

— David nói phục hồi Monica
nguồn

2

hai cái thứ hai sẽ không hoạt động, nhưng tìm là Ok. Hai cái thứ hai sẽ chọn mỗi class = mygroup và chọn mọi id = mydiv) tôi nghĩ.

— czupe

2

@czupe: không, trong khi cách tiếp cận bộ chọn ngữ cảnh được viết khác với jQuery, bên trong, $('#mydiv').find('.myclass');cách tiếp cận tương tự như được sử dụng trong đoạn mã đầu tiên. Ngẫu nhiên: '... chọn mọi id=mydiv'? Có nên chỉ bao giờ là một sử dụng một định idtrong một trang (một id phải là duy nhất trong tài liệu ).

— David nói phục hồi Monica

@DavidThomas Tôi mới thử $ ('# mydiv .myclass'); và điều đó đã kết thúc việc chọn tất cả các div có lớp my class chứ không chỉ các div trong mydiv.

— dùng3281466

@ user3281466: thật sao? Điều đó dường như không thể, bạn có thể tái tạo vấn đề của bạn ?

— David nói phục hồi lại

Làm thế nào để bạn kiểm tra bất cứ thứ gì tại div và sau đó đặt nó vào: not ()

— SuperUberDuper

20

Thử cái này

$("#mydiv div.myclass")

— ShankarSangoli
nguồn

Hoặc nếu bạn không quan tâm nếu đó là div(hoặc nếu nó sẽ luôn là a div), bạn có thể đơn giản hóa thành $ ("# mydiv .myclass").

— Michael Mior

@Michael - Vâng, chúng tôi chỉ có thể nói .mycalss nhưng nếu chúng tôi biết đó là div, div.myclass sẽ giúp tìm kiếm nhanh hơn.

— ShankarSangoli

@Shankar, có lẽ nó sẽ không làm cho nó nhanh hơn, chậm hơn. giả sử jquery sử dụng sizzle và không phải là người bản địa, document.queryselectorallnó có thể sẽ tìm kiếm theo cùng một cách và trong trường hợp của bạn thực hiện kiểm tra thêm . Có thể các triển khai bản địa làm như vậy.

— davin

Một số thử nghiệm nhanh tôi đã chạy cho thấy đây là phụ thuộc vào trình duyệt. Nó xuất hiện nhanh hơn một chút trong Chrome và chậm hơn một chút trong FF. Dù bằng cách nào, trừ khi bạn đang chạy bộ chọn này nhiều lần hoặc qua một số lượng lớn các phần tử, sự khác biệt có thể là không đáng kể. Xem ở đây để kiểm tra thô (và có thể thiếu sót) của tôi.

— Michael Mior

@Michael - Nếu chúng tôi chỉ định tên thẻ cùng với tên lớp, trước tiên, nó sẽ sử dụng getElementsByTagName và sau đó tìm tên lớp mà tôi sẽ nhanh hơn và vẫn sử dụng phương thức gốc để thực hiện sắp xếp cấp độ đầu tiên. Anways nó không đáng kể nếu không có nhiều yếu tố được chọn.

— ShankarSangoli

11

Bạn sẽ làm nó giống như cách bạn sẽ áp dụng bộ chọn css. Đối với instanse bạn có thể làm

$("#mydiv > .myclass")

hoặc là

$("#mydiv .myclass")

Cái cuối cùng sẽ khớp với tất cả các lớp trong myDiv, bao gồm cả lớp của tôi trong lớp.

— Leandro Galluppi
nguồn

6

Nếu bạn muốn chọn mọi phần tử có thuộc tính lớp "mygroup", hãy sử dụng

$('#mydiv .myclass');

Nếu bạn muốn chọn chỉ các phần tử div có thuộc tính lớp "mygroup", hãy sử dụng

$("div#mydiv div.myclass");

tìm hiểu thêm về bộ chọn jquery tham khảo các bài viết này

— e11438
nguồn

1

thử này để thay thế $(".video-divs.focused"). Điều này hoạt động nếu bạn đang tìm kiếm các div video được tập trung.

— người dùng3749775
nguồn