javascript - 仅选择两个选择器之一

Question

给定一个包含 jQuery 对象 $c ，其中包含多个元素，其中包含类名为 tmpSelected 和 selected 的元素，我想对于每个类名，仅从 $c 中选择一个元素，最好是 tmpSelected。该标记是此标记的复杂版本:

<ul id="a">
    <li class="selected"><a href="foo">Foo</a></li>
    <li><a href="bar">Bar</a></li>
    <li><a href="baz">Baz</a></li>
    <li><a href="biz">Biz</a></li>
</ul>
<ul id="b">
    <li><a href="woo">Woo</a></li>
    <li><a href="war">War</a></li>
    <li class="tmpSelected"><a href="waz">Waz</a></li>
    <li><a href="wiz">Wiz</a></li>
</ul>
<ul id="c">
    <li class="selected"><a href="xuu">Xuu</a></li>
    <li class="tmpSelected"><a href="xur">Xur</a></li>
    <li><a href="xuz">Xuz</a></li>
    <li><a href="xyz">Xyz</a></li>
</ul>

在这种情况下，我想要最终得到的是 $("#a > .selected, #b > .tmpSelected, #c > .tmpSelected") – 我想避免 .selected 元素(如果它具有 .tmpSelected 的同级元素)，并且我不想为 $c 的每个成员选择多个子元素> 其中 $c = $("#a, #b, #c")。

这就是我的想法:

var $c = $("#a, #b, #c");
var $selected = $c.map(function (idx, el) {
    var $el = $(el);
    var $tmpSel = $el.children(".tmpSelected");
    return $tmpSel.length ? $tmpSel : $el.children(".selected");
});

是否有一种合理的方法可以在不显式循环的情况下执行此操作？ (P.S. - 当不存在 .tmpSelected 或 .selected 子项时，返回空选择器是可以的。)

Answer 1

这是一个选择器，但它非常困惑。我相信它给出了正确的解决方案:

$("ul > li.tmpSelected, ul:not(:has(li.tmpSelected)) > li.selected");

首先，您查找 .tmpSelected 元素。然后，您查找仅包含 .selected 元素的任何 ul。 :has 选择器查找子元素，我使用 :not 选择器查找 ul 元素。然后我只需抓取子 selected 元素即可。

jsFiddle