Kiểm tra xem có tổ tiên nào có lớp bằng jQuery không

156

Có cách nào trong jQuery để kiểm tra xem có cha mẹ, ông bà, bà cố có một lớp không.

Tôi có một cấu trúc đánh dấu khiến tôi phải làm điều này trong mã:

$(elem).parent().parent().parent().parent().hasClass('left')

Tuy nhiên, để dễ đọc mã, tôi muốn tránh loại điều này. Có cách nào để nói "bất kỳ cha mẹ / ông bà / bà cố đều có lớp học này" không?

Tôi đang sử dụng jQuery 1.7.2.

— crmpicco
nguồn

stackoverflow.com/questions/16863917/ - trong trường hợp ai đó muốn làm điều đó mà không cần jQuery

— Robert Niestroj

Câu trả lời:

303

if ($elem.parents('.left').length) {

}

— Alex
nguồn

Cảm ơn, chỉ những gì tôi cần! Đối với hồ sơ, trong khi thực tiễn coi .lengthgiá trị trung thực là khá phổ biến trong JS, thì rõ ràng và dễ hiểu hơn nhiều.length > 0

— dooleyo

Đây là liên kết đến tài liệu jQuery .parents ()

— H Dog

Có nhiều cách để lọc cho tổ tiên nguyên tố.

if ($elem.closest('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents().hasClass('parentClass')) {/*...*/}
if ($('.parentClass').has($elem).length /* > 0*/) {/*...*/}
if ($elem.is('.parentClass *')) {/*...*/}

Coi chừng , closest() phương thức bao gồm chính phần tử trong khi kiểm tra bộ chọn.

Ngoài ra, nếu bạn có một bộ chọn duy nhất phù hợp với $elem, ví dụ: #myElembạn có thể sử dụng:

if ($('.parentClass:has(#myElem)').length /* > 0*/) {/*...*/}
if(document.querySelector('.parentClass #myElem')) {/*...*/}

Nếu bạn muốn khớp một phần tử tùy thuộc vào bất kỳ lớp tổ tiên nào của nó cho mục đích tạo kiểu, chỉ cần sử dụng quy tắc CSS :

.parentClass #myElem { /* CSS property set */ }

— A. Wolff
nguồn

Tôi có thể mạo hiểm nói (mà không kiểm tra điều này) rằng phương pháp này tốt hơn. Elem.parents sẽ đi qua toàn bộ cấu trúc cha mẹ, nơi gần nhất () nên (có thể) dừng lại một khi nó tìm thấy cha mẹ gần nhất với phần tử đó và do đó hiệu quả hơn. Đây là một phỏng đoán vô học. Tôi thường sử dụng gần nhất (). Âm thanh như tôi tìm thấy một chủ đề mới để nghiên cứu cho blog của tôi! : P

— dudewad

@dudewad đúng vậy nhưng nó khá gần đây. Ý tôi là trong phiên bản jq cũ hơn, AFAIK, đây không phải là trường hợp. Vòng lặp cha mẹ không bị phá vỡ khi cha mẹ khớp đầu tiên bằng cách sử dụng gần nhất (), nhưng bây giờ là vậy. (không biết từ phiên bản jq nào nhưng tôi khá chắc chắn là chính xác trong tuyên bố này)

— A. Wolff

Tốt để biết, cảm ơn cho thông tin. Điều kỳ lạ là họ sẽ không tạo ra sự đột phá từ phiên bản đầu tiên.

— dudewad

khi không tìm thấy cha mẹ, cha mẹ () nhanh hơn gần nhất () jsperf.com/closest-vs-parents-foobar

— Alex

@Alex Khá can thiệp thực sự, thx cho đầu vào! BTW, đọc lại câu hỏi, Is there any way in jQuery to check if any parent,..., closest()kiểm tra đối với bản thân yếu tố vì vậy đây là không thực sự trả lời câu hỏi, OP có thể muốn explecitely loại trừ các yếu tố bản thân, vì vậy ya, câu trả lời là sử dụng.parents()

— A. Wolff

Bạn có thể sử dụng parentsphương thức với .classbộ chọn được chỉ định và kiểm tra xem có bất kỳ phương thức nào phù hợp với nó không:

if ($elem.parents('.left').length != 0) {
    //someone has this class
}

— Igor Dymov
nguồn