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

我建议这个概念与你已经拥有的相似，不过这可以保证它只为每个父母返回一个项目。

var selected = $("#a, #b, #c").map(function() {
   var item = $(this).find(".tmpSelected");
   if (!item.length) {
       item = $(this).find(".selected");
   }
   return(item.get(0));
});

Answer 2

这是一个选择器，但它非常混乱。我相信它提供了正确的解决方案：

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

首先，您要查找和.tmpSelected元素。然后，您会查找只有ul元素的.selected个:has。 :not选择器会查找该子项，并使用ul选择器查找selected个元素。然后我只是抓住孩子{{1}}元素。

jsFiddle

仅选择两个选择器中的一个

2 个答案: