如果另一个元素不存在，是否有一种优雅的方法可以在 JQuery 中选择一个元素？答案

【问题标题】：Is there an elegant way to select an element in JQuery if another does not exist?如果另一个元素不存在，是否有一种优雅的方法可以在 JQuery 中选择一个元素？
【发布时间】：2012-07-22 03:27:09
【问题描述】：

假设我有以下要求：如果存在这样的元素，则将元素 e 添加到 id 为 "x" 的元素中，否则将 e 添加到正文中。

在 DOM 级别 0 中，我可以写：

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

在 jQuery 中，以下操作不起作用：

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

因为如果不存在 id 为 x 的元素，则第一个分离返回空 jquery 对象，其中是真实的，而不是虚假的，所以 append 什么也不做。但是，我可以写：

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

但是这个解决方案有点笨拙，因为索引 jQuery 对象会让我回到 HTMLElements，所以我必须使用 appendChild 而不是 append。虽然这可行，但我想知道这种混合级别是否合适或表明设计不佳。

有没有办法使用first()？也许我可以创建一个 jQuery 对象，它本质上是一个数组，它的第一个元素是 id 为 x 的 div，第二个元素是 body。我知道我可以使用带有元素数组的 jQuery 构造函数表单来做到这一点，但是我又回到了混合级别。我也知道如何检查是否存在 id x ($("#x").length) 的元素，但我看不出这将如何导致一种优雅的方式来表达“如果存在 id x 的元素，否则为主体”。

这样的公式存在吗？

【问题讨论】：

标签： jquery dom jquery-selectors

【解决方案1】：

老实说，我真的不认为这是非常冗长的：

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

而且它的意图也很明确。如果这个习语经常出现，你甚至可以将它包装在一个函数中。

另外，这是一个三元形式，每个查询只触发一次（尽管它是在可读性上的权衡）：

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

【讨论】：

你也可以使用$("#x").length ? $("#x") : $("body")。
感谢您的快速回复。我有点不好意思要求单行（在 SO 上太常见了，我知道！！）但我很惊讶，因为 DOM Level 0 有一个简洁的公式，那么 jquery 可能应该。 :)
@RayToal：添加了一个性能良好的单行，尽管它的可读性明显降低。我仍然会通过将两行版本包装在一个函数中来投票使其成为一行，特别是如果它出现很多......但如果它只使用一次，那么嗯。
同意单行的可读性较差，但谢谢！赞成第一个答案。

【解决方案2】：

您可以使用它来包装原生 DOM 调用，而不是使用 jQuery 来选择元素：

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

它并不十分优雅（甚至不使用 jQuery），也不是一种普遍适用的技术，但你最终会得到一些你可以附加的东西（并且只需一次就产生一个相对便宜的 jQuery 调用）。

您将无法使用 first() -- 例如，$("#foo, body").first(); -- 因为它返回选定元素的顺序是基于 DOM 顺序，而不是选择器顺序（感谢 @muistooshort）

【讨论】：

哦，这很漂亮，但 —— 除非 jQuery 在这里发挥了真正重要的魔力——它的性能缺点是在返回第一个元素而不是短元素之前选择 all 元素-电路。不过，如果我们关心这种性能水平，我们真的不应该首先使用 jQuery。
不，因为"The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order."，这将不起作用，例如：jsfiddle.net/ambiguous/edYY6。这将给你<body> 每次。
同意这是非常好的。我们对每一个都可以（或者应该是），因为第一个有一个 id，它在页面上应该是唯一的，第二个是 the 正文元素。 HTML 中应该只有其中之一。
不幸的是，$(a).add(b) 也发生了同样的事情，它们以 DOM 顺序出现。
我也喜欢这个新版本的答案！如果给定的查询是简化的，而实际的查询类似于 #parent form.semantic fieldset:nth-child(2)，则可能会遇到麻烦，但如果它只是一个 ID 选择器，我认为我们很高兴。