jQuery selecting right DOM element

Live example:

http://jsfiddle.net/KezWE/

I have a few sets of unordered lists (menu + product list).

My sorting script works fine, but when I try to insert two lists at one page - they are not working as separate lists and are being both sorted. And I don't want that, I want one menu to sort only the first list below, not both of them.

I've been trying hard with (this).next() etc., but nothing helps. I'm unable to change the DOM, can only edit jQuery code.

Any ideas?

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 开发者_Go百科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();
});

Live example:

http://jsfiddle.net/KezWE/

I think this is the result you are looking for: http://jsfiddle.net/KezWE/4/

Let me know!

Can you give your ul's a unique id and reference them explicitly - using ".menu" will affect both menus - that is how it is supposed to work.

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();
});