如何測試jQuery Traverse/Selector丟失DOM元素 - 未定義？

Question

我想確定一個jQuery選擇器（通過遍歷DOM）的結果是否確實找到了DOM元素，但我遇到了一些問題。我認爲通過檢查變量是否等於undefined或null可以在這種情況下工作，但它不適合我。我覺得我缺少一些基本的東西。任何幫助表示讚賞。

這是我的例子。

jsFiddle

HTML

<ul> 
    <li> 

    </li> 
</ul> 

<div id="results"></div> 

的Javascript/jQuery的

var 
    $element = $("ul li"), 
    $parent = $element.parent().closest("li"),//this is the selector that is giving me the issue 
    $r = $("#results")//just used to append the results of the if statement below 
    ; 

$r.append("<br />$parent = " + $parent); 
$r.append("<br />typeof $parent = " + typeof $parent); 
$r.append("<br />$parent.length = " + $parent.length); 
$r.append("<br />$parent[0] = " + $parent[0] + "<br />");//for Chrome 

if ($parent === "null") { $r.append("<br />$parent === 'null'") }//not expected to work, just testing 
if ($parent === null) { $r.append("<br />$parent === null") }//not expected to work, just testing 
if ($parent == null) { $r.append("<br />$parent == null") }//not expected to work, just testing 

if ($parent === "undefined") { $r.append("<br />$parent === 'undefined'") } 
if ($parent === undefined) { $r.append("<br />$parent === undefined") } 
if ($parent == undefined) { $r.append("<br />$parent == undefined") } 

if ($parent[0] === "undefined") { $r.append("<br />$parent[0] === 'undefined'") } 
if ($parent[0] === undefined) { $r.append("<br />$parent[0] === undefined") } 
if ($parent[0] == undefined) { $r.append("<br />$parent[0] == undefined") } 

if (typeof $parent === "undefined") { $r.append("<br />typeof $parent === 'undefined'") } 
if (typeof $parent === undefined) { $r.append("<br />typeof $parent === undefined") } 
if (typeof $parent == undefined) { $r.append("<br />typeof $parent == undefined") } 


if (typeof $parent[0] === "undefined") { $r.append("<br />typeof $parent[0] === 'undefined'") } 
if (typeof $parent[0] === undefined) { $r.append("<br />typeof $parent[0] === undefined") } 
if (typeof $parent[0] == undefined) { $r.append("<br />typeof $parent[0] == undefined") } 

if ($parent.length == 0) { $r.append("<br />$parent.length == 0") } 

jsFiddle

這些返回true; $parent[0] === undefined和$parent[0] == undefined和typeof $parent[0] === 'undefined';

這是有道理的，因爲jQuery選擇器沒有找到任何DOM對象，並且沒有元素[0]。我只試過這個，因爲使用console.log，Chrome中的對象需要這個。但我不認爲這是正確的。

$parent.length == 0按預期工作。但這是需要一個!== undefined' and！== null`？

在此先感謝！

Answer 1

如果選擇器或遍歷結果爲零匹配元素，則jQuery對象的length屬性將等於0。標準 - 和只在必要 - 如果匹配元素檢查的方法是：

jQueryObject.length === 0 

該選擇元件將自己返回一個jQuery對象（包含匹配元素）所有jQuery函數，所以它對於這個結果是不可能的永遠是null或undefined。它將始終返回一個對象，並且該對象始終具有一個length屬性。

看你的具體的例子：

var $element = $("ul li"), 
    $parent = $element.parent().closest("li") 

如果存在內部<ul>元件沒有<li>元素代碼執行時，$element將是一個空jQuery對象（具有length屬性等於0一個jQuery對象） 。調用$element.parent()將依次返回一個空的jQuery對象，然後調用.closest('li')也會返回一個空的jQuery對象。

現在，假設代碼執行時<ul>元素中有<li>元素;在這種情況下，$element將是一個非空的jQuery對象。他們都有一個父項，所以調用$parent將返回一個包含一些元素的jQuery對象。但是，如果這些元素中沒有一個元素與文檔之間有<li>元素，則.closest('li')將返回空的jQuery對象。