如何使用 OR 条件链接选择器（如果 main 为空，则为替代结果集）

Question

我现在拥有的：

var result = $('selector1');
if (result.length == 0) result = $('selector2');

但这击败了链接。

问题是 - 如何通过 JQuery 链接获得相同的结果？

我无法使用 $('selector1, selector2')，因为这总是会为两个选择器选择结果集，而只有在没有选择器的情况下我才需要 selector2 的结果selector1 的匹配元素。

Answer 1

这种行为在某些地方称为“合并”。这是一个通用的 jQuery 插件，可以为您完成此操作（在大量反馈后进行编辑，请参阅评论）。

// The namespace function
jQuery.coalesce = function(selectors){

    var out;

    $.each(selectors, function(i, v){
        var el = jQuery(v);
        if (el.length) {
           out = el;
           return false;
        }
    });

    return out || jQuery();
};

// The jQuery plugin
jQuery.fn.coalesce = function(){
    return jQuery.coalesce(this.selector.split(",")); //a little brittle
};

因此，在 #foo 不存在，而 a 和 div 存在的世界中，如果您存在：

jQuery.coalesce(["#foo", "a", "div"])

则会返回 jQuery ("a") 如果 #foo 不存在，或者 jQuery("#foo") 如果 #foo 存在存在。

如果您需要在链的中间使用它，则可以使用 $("#foo, a, div").coalesce()，但它容易受到选择器本身内的命令的影响。

Answer 2

如果你必须，这可以做到：

$(function(){
  var r = $('selector1');
  if (r.length == 0) r = $('selector2');
  return r;
}());

但是，我不认为链接在你的例子中被击败。链接并不是万能的，加入像上面这样的痛苦选择更多的是使代码变得混乱而不是简化。

Answer 3

var result = $('selector1');
( result.length ? result : $('selector2') ).css('color', 'red');

Answer 4

我不相信您可以仅使用纯 jQuery 完全按照您想要的方式执行此操作，但是您可以通过使用 jQuery 的扩展选择器来获得您正在寻找的一些功能，该选择器允许您基于否定和布尔运算符进行选择。查看 http://api.jquery.com/category/selectors/jquery-选择器扩展/。

Answer 5

就我个人而言，我非常喜欢 Ruby on Rails 中的“存在”习惯用法，因此我已将其添加到我的 JS 设置中：

jQuery.fn.presence = function presence() {
    return this.length !== 0 ? this : null;
};

现在在我的代码中使用它：（

const ul = el.parents('UL').first().presence() ?? el.siblings('UL').first()

如果您无法负担使用 ？？, || 在这里也可以。）