jQuery 选择正确的 DOM 元素

Question

实例：

http://jsfiddle.net/KezWE/

我有一些无序列表集（菜单+产品列表）。

我的排序脚本工作正常，但是当我尝试在一页插入两个列表时 - 它们没有作为单独的列表工作，而是都被排序。我不希望这样，我希望一个菜单仅对下面的第一个列表进行排序，而不是对两者进行排序。

我一直在努力尝试 (this).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();
});