JQuery tìm phần tử cha đầu tiên với tiền tố lớp cụ thể

123

Tôi muốn có được cha mẹ đầu tiên có tiền tố lớp cụ thể, giả sử:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

Ví dụ, phần tử hiện tại của tôi là #dividvà tôi muốn tìm phần tử đầu tiên có tiền tố lớp div-a. Vì vậy, về cơ bản nó sẽ chọn:

<div class="div-a89892">

jquery jquery-selectors

— Du hành thời gian
nguồn

Dừng lại. Sử dụng nhiều lớp, thay vì kết hợp thông tin thành một lớp. Công cụ chọn 'khớp' chậm và thiết kế này không mở rộng cho bất kỳ sửa đổi nào. <div class='a'>, sau đó cung cấp các quy tắc cho div.a. Tôi thực sự không biết tại sao bạn lại đặt divtên lớp.

— Stefan Kendall

Tuy nhiên, không hợp nhất dữ liệu vào tiền tố lớp. Đây là một mô hình khủng khiếp và nó dễ dàng được khắc phục với nhiều lớp.

— Stefan Kendall

@StefanKendall: Đôi khi bạn giao dịch với những thứ nhảm nhí của bên thứ ba và đôi khi bạn đang hỗ trợ các ứng dụng cũ mà bạn không thể khắc phục nhanh chóng. Thiết kế xấu là một thực tế của cuộc sống, và đây là một câu hỏi hoàn toàn chính đáng.

— Nerdmaster

Câu trả lời:

221

Sử dụng .closest()với bộ chọn:

var $div = $('#divid').closest('div[class^="div-a"]');

— Bóng Matt
nguồn

BTW, không biết tại sao điều này đã bị hạ cấp. Bộ chọn tiền tố lớp dễ vỡ, nhưng nó sẽ hoạt động.

— Matt Ball

Đối với OP: Đảm bảo rằng phần tử bạn đang tìm kiếm là cha mẹ ở đâu đó trên cây DOM và không phải là anh chị em hoặc tương tự với đối tượng bạn đang tìm kiếm (theo tài liệu). Nó không phải là "gần nhất ở bất cứ đâu trong tài liệu" mà là "gần nhất bằng cách làm việc với cây DOM".

— Christian P.

Không làm việc cho tôi. Ngoài ra, tôi muốn tìm phần tử đầu tiên có tiền tố cụ thể, đó không phải là phần tử div.

— Du hành thời gian

@Time sau đó xóa divbộ chọn phần tử : $('#divid').closest('[class^="div-a"]'). Như @Stefan đã nhận xét, tuy nhiên, bạn thực sự nên sử dụng nhiều lớp.

— Matt Ball

Bộ chọn này có số lượng chu kỳ vô lý (nhưng vẫn có thể nhanh). Nếu bạn cần hỗ trợ IE6, IE7 hoặc IE8, điều này thực sự có thể làm bạn khó chịu nếu DOM của bạn phát triển quá lớn; IE xuất hiện hộp thoại "script không phản hồi" khi một số lệnh JS VM nhất định được thực thi và KHÔNG sau một khoảng thời gian nhất định. Tôi đã thấy các kịch bản hoàn thành trong 0,1ms sự cố thám hiểm internet vì lý do này.

— Stefan Kendall

Jquery sau đó cho phép bạn tìm cha mẹ với .parents()phương pháp.

Do đó tôi khuyên bạn nên sử dụng:

var $div = $('#divid').parents('div[class^="div-a"]');

Điều này cung cấp cho tất cả các nút cha phù hợp với bộ chọn. Để có được cha mẹ đầu tiên khớp với bộ chọn, hãy sử dụng:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

Đối với các truy vấn truyền tải DOM khác như vậy, hãy xem tài liệu về truyền tải DOM .

— Nắng R Gupta
nguồn

Câu trả lời không gây hiểu lầm, nó chỉ đưa ra một cách thay thế khác cho .closest (), .parents () có vẻ dễ đọc hơn và là một giải pháp khác cho vấn đề này.

— Sunny R Gupta

Gần nhất là một giải pháp tốt hơn so với điều này vì gần nhất sẽ chỉ tìm thấy trận đấu đầu tiên, trong khi cha mẹ sẽ tìm thấy TẤT CẢ các trận đấu đi lên DOM. Rõ ràng là hiệu quả hơn để sử dụng gần nhất, mặc dù tôi đồng ý, đó không phải là chức năng được đặt tên tốt nhất.

— Mog0

Hài hước lắm, cuối cùng tôi đã sử dụng giải pháp này vì .parentsUtil () không hoạt động như tôi mong đợi.

— Đánh dấu tiện dụng