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

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

這是我的例子。

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

在此先感謝！

來源

2013-02-01 JoeFletch

*「'$ parent。長度== 0'按預期工作。但是這是否需要用'！== undefined'和'！== null'？「* Huh？......不會。正如你所說的那樣，它可以工作，這是你的答案 –

'$ parent.length == 0' – pktangyue

@thesystem，由於'$ parent'沒有在DOM中找到元素，所以我期望'$ parent.length'等於0。對嗎？我試圖確定的是如果'$ parent'是'未定義'，那麼我應該首先檢查'$ parent'是否爲空並且不是undefined？ – JoeFletch

如果選擇器或遍歷結果爲零匹配元素，則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對象。

來源

2013-02-01 16:19:21

感謝您解釋始終作爲對象的jQuery選擇器的結果。 – JoeFletch

@JoeFletch沒問題，它不一定直觀。雖然幾乎所有的jQuery函數本身都返回一個jQuery對象（具有相同或不同的元素集合），但jQuery函數的鏈接是可能的。 –

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

回答

相關問題