jQuery选择正确的DOM元素

Question

实况示例：

http://jsfiddle.net/KezWE/

我有几套无序列表(菜单+产品列表)。

我的排序脚本运行良好，但是当我尝试在一页中插入两个列表时--它们不是作为单独的列表工作，而是被排序的。我不想那样，我只想要一个菜单对下面的第一个列表进行排序，而不是两者都排序。

我一直在努力处理(这个).next()等问题，但是没有任何帮助。我无法更改DOM，只能编辑jQuery代码。

有什么想法吗？

HTML：

<ul class="menu">
    <li><a data-value="all" href="#">All</a></li>
    <li><a data-value="big" href="#">Big</a></li>
    <li><a data-value="small" href="#">Small</a></li>
</ul>

<ul class="list">
    <li><div data-value="big">BIG</div></li>
    <li><div data-value="small">SMALL</div></li>
    <li><div data-value="big">BIG</div></li>
    <li><div data-value="small">SMALL</div></li>
    <li><div data-value="big">BIG</div></li>
    <li><div data-value="big">BIG</div></li>
</ul>

<ul class="menu">
    <li><a data-value="all" href="#">All</a></li>
    <li><a data-value="big" href="#">Big</a></li>
    <li><a data-value="small" href="#">Small</a></li>
</ul>

<ul class="list">
    <li><div data-value="big">BIG</div></li>
    <li><div data-value="small">SMALL</div></li>
    <li><div data-value="big">BIG</div></li>
    <li><div data-value="small">SMALL</div></li>
    <li><div data-value="big">BIG</div></li>
    <li><div data-value="big">BIG</div></li>
</ul>

jQuery：

jQuery('ul.menu li a[data-value=all]').click(function(e) {
    jQuery('.list li div').show();
                e.preventDefault();
});

jQuery('ul.menu li a[data-value=big]').click(function(e) {
    jQuery('.list li div').show(); //I know this looks just BAD, but that's just for jsfiddle
    jQuery('.list li div[data-value=small]').hide();
                e.preventDefault();
});

jQuery('ul.menu li a[data-value=small]').click(function(e) {
    jQuery('.list li div').show(); //I know this looks just BAD, but that's just for jsfiddle
    jQuery('.list li div[data-value=big]').hide();
                e.preventDefault();
});

实况示例：

http://jsfiddle.net/KezWE/

Answer 1

我想这就是你想要的结果：http://jsfiddle.net/KezWE/4/

让我知道！

Answer 2

您能给您的ul是一个唯一的id并显式引用它们-使用".menu“将影响两个菜单-这是它应该如何工作。

Answer 3

jQuery('ul.menu li a[data-value=all]').click(function(e) {
    var list = jQuery(this).closest('ul').next('.list');
    list.find('div').show();
    e.preventDefault();
});

jQuery('ul.menu li a[data-value=big]').click(function(e) {
    var list = jQuery(this).closest('ul').next('.list');
    list.find('div').show();
    list.find('div[data-value=small]').hide();
    e.preventDefault();
});

jQuery('ul.menu li a[data-value=small]').click(function(e) {
    var list = jQuery(this).closest('ul').next('.list');
    list.find('div').show();
    list.find('div[data-value=big]').hide();
    e.preventDefault();
});