0

$c给定一个包含多个元素的包含 jQuery 对象，其中包含具有类名 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")我想避免它，并且我不想为where的每个成员选择多个子元素。.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");
});

有没有一种合理的方法可以在没有显式循环的情况下做到这一点？（PS - 当没有.tmpSelected或.selected子项存在时返回一个空的选择器是可以的。）

4

2 回答 2

2

我建议这在概念上与您已经拥有的非常相似，除了这保证它只为每个父母返回一个项目。

var selected = $("#a, #b, #c").map(function() {
   var item = $(this).find(".tmpSelected");
   if (!item.length) {
       item = $(this).find(".selected");
   }
   return(item.get(0));
});
于 2012-08-22T23:17:40.207 回答
2

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

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

首先你要寻找和.tmpSelected元素。然后你寻找任何ul只有.selected元素的东西。选择:has器查找子元素，我使用:not选择器查找ul元素。然后我简单地抓住孩子selected元素。

jsFiddle

于 2012-08-22T23:19:12.830 回答