差）和：具有（）

Question

我有作爲可以被概括一個粗糙的導航結構：

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

子項被隱藏直到懸停。我想表明，B，d和E通過它們的造型，所以我使用的選擇有子項：

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

其中僅退還B和D.將其更改爲：

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

返回所有正確的項目，但我爲什麼困惑。

EDIT

:has()似乎沒有受到影響（完全地）通過嵌套作爲

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

返回相同的結果如上述.has()。

Answer 1

從jQuery API文檔：

:has選擇哪個 包含 指定選擇器相匹配的至少一種元素的元素。

.has()降低了組 匹配元素到那些具有使選擇 或DOM元素相匹配的 後代。

這裏有一個相關的問題：jQuery: subtle difference between .has() and :has()，這似乎指出了兩者的區別。

然而，看來:has不匹配的外觀來以嵌套的方式同時.has()做，因爲它作爲一個jQuery對象能夠匹配所有的後代，甚至嵌套一個，像一個普通的返回匹配的子集jQuery選擇器。

Answer 2

:has() selector僅選擇具有降序元素的由給定選擇器匹配的元素。在內部，如:has is defined（Sizzle是jQuery的默認選擇器庫）：

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

這幾乎等同於測試jQuery("selector", elem).length或jQuery(elem).find("selector").length爲每個選定的元件來過濾那些不具有這樣的後代。

與此相反，has method可以採用選擇器或DOM元素，並只返回那些不包含任何給定元素的元素。因爲在內部，has method is defined爲：

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; 
      } 
     } 
    }); 
} 

所以它使用contains method來檢查給定的元素包含以過濾所選擇的元素。請注意，只需包含一個給定的元素即可。