Question

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

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

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

在jQuery中，以下不工作：

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

因为如果不存在id为x的元素，则第一个disjunct返回空的jquery对象，其中包括truthy，而不是falsy，因此append不执行任何操作。我可以但是，写道：

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

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

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

这样的配方是否存在？

Answer 1

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

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

它的意图也很清楚。如果这个成语很多，你甚至可以将它包装在一个函数中。

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

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

Answer 2

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

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

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

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

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

2 个答案: