khác biệt trong kết quả trả về giữa .has() và: có()

Question

Tôi có một cấu trúc menu gnarly có thể được khái quát như sau:

<ul id="navigation"> 
    <li> 
     A 
     <ul> 
      <li> 
       B 
       <ul> 
        <li>C</li> 
       </ul> 
      </li> 
      <li> 
       D 
       <ul> 
        <li> 
         E 
         <ul> 
          <li>F</li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

Tiểu mục được ẩn cho đến khi di chuột. Tôi muốn chỉ ra rằng B, D, và E có tiểu mục bằng cách tạo kiểu cho chúng vì vậy tôi sử dụng bộ chọn:

$('#navigation > li li:has(ul)') 

Mà chỉ trở lại B và D. Thay đổi nó để:

$('#navigation > li li').has('ul') 

trở tất cả các mục chính xác nhưng tôi nhầm lẫn là tại sao.

EDIT

:has() không xuất hiện để bị ảnh hưởng (hoàn toàn) bằng cách làm tổ như

$('#navigation ul > li:has(ul)') 

trả về kết quả tương tự như .has() trên.

Answer 1

Từ các tài liệu jQuery API:

:has chọn yếu tố mà chứa ít nhất một yếu tố mà phù hợp với selector cụ thể.

.has() giảm tập hợp các yếu tố phù hợp với số phù hợp với bộ chọn hoặc phần tử DOM.

Có một câu hỏi có liên quan ở đây: jQuery: subtle difference between .has() and :has(), dường như chỉ ra sự khác biệt trong hai điều có thể là gì.

Tuy nhiên, có vẻ như :has không nhìn trong một kết quả phù hợp theo kiểu lồng nhau trong khi .has() thực hiện bởi vì nó trả về một tập con của các đối sánh dưới dạng đối tượng jQuery có thể khớp với tất cả con cháu. Bộ chọn jQuery.

Answer 2

:has() selector chỉ chọn những phần tử có phần tử giảm dần được so khớp với bộ chọn đã cho. Bên trong, :has is defined như (Sizzle là jQuery mặc định thư viện selector):

function(elem, i, match){ 
    return !!Sizzle(match[3], elem).length; 
} 

này gần như tương đương với thử nghiệm jQuery("selector", elem).length hoặc jQuery(elem).find("selector").length cho mỗi phần tử được lựa chọn để lọc những người không có con cháu như vậy.

Ngược lại, has method có thể chọn bộ chọn hoặc phần tử DOM và chỉ trả lại những phần tử không chứa bất kỳ phần tử nào đã cho. Bởi vì trong nội bộ, các has method is defined như:

function(target) { 
    var targets = jQuery(target); 
    return this.filter(function() { 
     for (var i = 0, l = targets.length; i < l; i++) { 
      if (jQuery.contains(this, targets[i])) { 
       return true; 
      } 
     } 
    }); 
} 

Vì vậy, nó sử dụng contains method để kiểm tra xem các yếu tố nhất định được chứa để lọc các yếu tố lựa chọn. Lưu ý rằng nó chỉ đủ một trong các phần tử đã cho.