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 уникальный идентификатор и ссылаться на них явно - использование ".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();
});