jQuery 合并/过滤器选择器

Question

我想合并一个被另一个选择器分割的选择器。
我的实际选择器看起来像 $('.JS_toggle-submenu')

<li class=​"JS_toggle-submenu" data-submenu=​"#submenu-l2-foo">​…​</li>​
<h2 class=​"JS_toggle-submenu" data-submenu=​"#submenu-l2-foo">​…​</h2>​
<p class=​"JS_toggle-submenu" data-submenu=​"#submenu-l3-bar">​…</p>​
<h3 class=​"JS_toggle-submenu" data-submenu=​"#submenu-l3-bar">​…</h3>​

并希望将其过滤到每个数据子菜单的第一个，例如
$('.JS_toggle-submenu').filter('[data=GROUPING]:first')

<li class=​"JS_toggle-submenu" data-submenu=​"#submenu-l2-foo">​…​</li>​
<p class=​"JS_toggle-submenu" data-submenu=​"#submenu-l3-bar">​…</p>​

当然，我不是在寻找静态解决方案。
我没有看到有效的方法来做到这一点，看来我需要再次循环，但我更愿意避免，但也许这里有人有一个神奇的解决方案？

//编辑：
我需要一个 IE7/8 兼容性，这就是为什么我没有选择 indexOf 解决方案，但我在原来的问题中省略了解释。
我在这里比较了这两个结果http://jsperf.com/filter-loop-or-regex相同的Ops/sec。

Answer 1

您可以根据之前找到的对象数组过滤掉 ID。比如：

// Array of IDs already found
var existing = [];
// Regex to pull the level number from the data attribute
var regexp = new RegExp("#submenu-l([0-9]+)-(.*?)", "i");
console.log($(".JS_toggle-submenu[data-submenu^='#submenu-l']").filter(function() {
    // Get the ID
    var id = regexp.exec($(this).data("submenu"))[1];
    // If we have already found a DOM element for this level, continue
    if(existing[id]) return false;
    // Otherwise add it to the existing found elements...
    existing[id] = true;
    // Allow it to pass through the filter
    return true;
}).get());

Working Example

Answer 2

这里每个循环都使用一个 jquery：http://jsfiddle.net/3y69usxv/

var submenus = [];
var firstMenus = [];

$('.JS_toggle-submenu').each(function(){
    var $this = $(this);

    if (submenus.indexOf($this.data('submenu')) < 0) {
        submenus.push($this.data('submenu'));
        firstMenus.push($this);
    }
});

console.log(firstMenus);