有沒有一種優雅的方式來選擇JQuery中的元素，如果另一個不存在？

假設我有以下要求：將元素e添加到ID爲"x"的元素（如果存在此元素），否則將e添加到正文中。有沒有一種優雅的方式來選擇JQuery中的元素，如果另一個不存在？

在DOM 0級，我可以這樣寫：

var parent = document.getElementById("x") || document.body; 
parent.appendChild(e);

在jQuery中，下列不不工作：

var parent = $("#x") || $("body"); 
parent.append(e);

，因爲如果與ID x不存在元素，第一間斷返回空的jquery對象，與truthy，而不是falsy，所以append什麼都不做。我可以，但是，寫：

var parent = $("#x")[0] || $("body")[0]; 
parent.appendChild(e);

但這種方法是有點笨拙，因爲索引jQuery對象得到我回HTML元素，所以我必須用appendChild代替append。雖然這是有效的，但我想知道這種混合程度是否合適或是否表明設計不好。

可能有辦法使用first()？也許我可以創建一個jQuery對象，它本質上是一個數組，其第一個元素是id爲x的div，第二個元素是body。我知道我可以用帶有元素數組的jQuery構造函數來做到這一點，但是我回到了混合層次。我也知道如何檢查id爲x（$("#x").length）的元素的存在，但我無法看到這將如何優雅地使用「id爲id的元素（如果它存在，否則爲body）」。

這樣的表述是否存在？

來源

2012-07-22 Ray Toal

而不是使用jQuery來選擇元素，你可以用它來包裝原生DOM調用：

$(document.getElementById("foo") || document.body)

這不完全優雅（或者真的連使用jQuery），也不是普遍適用的技術，但你的東西，你可以追加到結束（和公正招致相對廉價jQuery的調用曾經）。

您將無法使用first() - 例如，$("#foo, body").first(); - 因爲在它返回選定的元素的順序是基於DOM順序，而不是選擇器順序（感謝，@muistooshort）

來源

2012-07-22 03:32:58 Chris

哦，這很漂亮，不過 - 除非jQuery在這裏運行一些非常嚴肅的魔法 - 它在返回第一個元素之前選擇* all *元素的性能缺點，而不是短路。儘管如此，如果我們關心這種性能水平，我們確實不應該首先使用jQuery。 – Matchu 2012-07-22 03:34:31

不，這不起作用，因爲[「返回的jQuery對象中DOM元素的順序可能不一樣，因爲它們將按照文檔順序。」]（http://api.jquery.com/multiple-選擇器/），例如：http://jsfiddle.net/ambiguous/edYY6/。這會每次給你''。 – 2012-07-22 03:35:19

同意這是非常好的。我們可以與每一個儘管（或應該），因爲第一個有一個ID，這應該是獨一無二的頁面，第二個** **身體元素。 HTML中只能有一個。 – 2012-07-22 03:35:48

老實說，我真的不認爲這是非常詳細：

var parent = $('#x'); 
if(parent.length == 0) parent = $('body');

而且其目的也很清楚。如果這個成語出現很多，你甚至可以把它包裝在一個函數中。

而且，這裏有一個三進制形式，只有激發每個查詢一次（雖然這是可讀性的權衡）：

var parent = (x = $('#header')).length ? x : $('body');

來源

2012-07-22 03:29:04 Matchu

你也可以使用'$（「＃x」）。length？ $（「＃x」）：$（「body」）'。 – 2012-07-22 03:30:13

感謝您的快速回復。我有點不好意思要求單線程（太常見了，我知道!!），但是我很驚訝，因爲DOM Level 0有一個簡明的表述，所以jquery可能應該這樣做。 :) – 2012-07-22 03:30:34

@RayToal：增加了一個表現良好的單行，雖然它明顯不太可讀。我仍然投票通過在一個函數中包裝兩行版本，特別是如果它出現了很多......但如果它只用了一次，那麼meh。 – Matchu 2012-07-22 03:33:04

有沒有一種優雅的方式來選擇JQuery中的元素，如果另一個不存在？

回答

相關問題