Question

直播示例：

我有几组无序列表（菜单+产品列表）。

我的排序脚本工作正常，但是当我尝试在一个页面上插入两个列表时 - 它们不是作为单独的列表工作，而是被排序。我不希望这样，我想要一个菜单只排序下面的第一个列表，而不是两个。

我一直在努力用（这个）.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();
});

jQuery选择正确的DOM元素

3 个答案: