将 css 添加到选定的“项目”jQuery 过滤器

Question

我正在使用此脚本过滤我的项目，但我需要将 margin:0 添加到活动/选定项目，以便它们正确排列。

JS

$(document).ready(function () {
    $('ul#filter a').click(function () {
        $(this).css('outline', 'none');
        $('ul#filter .current').removeClass('current');
        $(this).parent().addClass('current');

        var filterVal = $(this).text().toLowerCase().replace(' ', '-');

        if (filterVal == 'all') {
            $('ul#items li.hidden').fadeIn('xslow').removeClass('hidden');
        } else {

            $('ul#items li').each(function () {
                if (!$(this).hasClass(filterVal)) {
                    $(this).fadeOut('normal').addClass('hidden');
                } else {
                    $(this).fadeIn('xslow').removeClass('hidden');
                }
            });
        }

        return false;
    });
});

帮助高度赞赏

=========================

添加了编辑的 HTML

菜单：

                        <ul id="filter">
                        <li class="current"><a href="#">All</a></li>
                        <li><a href="#">item1</a></li>
                        <li><a href="#">item2</a></li>
                        <li><a href="#">item3</a></li>
                        <li><a href="#">item4</a></li>
                        <li><a href="#">item5</a></li>
                        <li><a href="#">item6</a></li>
                </ul>

和项目：

                        <ul id="items">
                        <div class="span12">

                        <li class="item1 span4">
                        <img src="images/item.jpg" alt=""/>
                        </li>

                        <li class="item2 span4">
                        <img src="images/item.jpg" alt=""/>
                        </li>

                        <li class="item3 span4">
                        <img src="images/item.jpg" alt=""/>
                        </li>

                        <li class="item4 span4">
                        <img src="images/item.jpg" alt=""/>
                        </li>

                        <li class="item5 span4">
                        <img src="images/item.jpg" alt=""/>
                        </li>

                        <li class="item6 span4">
                        <img src="images/item.jpg" alt=""/>
                        </li>

                        </div>
                        </ul>

如您所见，我使用的是 TwitterBootsrap 2.X 我很喜欢使用 nth-child 选择器来删除某些 .span 的边距。以便项目在不同的行中正确排列。

Answer 1

如果您单击的元素是您的活动元素并且current 是您的活动类，那么试试这个：

将margin:0px 添加到当前班级。

.current { margin : 0px !important; }

现在将当前类添加到活动元素并将其从同级元素中删除。

$(this).parent().addClass('current'); // add current class to active element 
$(this).parent().siblings().removeClass('current'); // remove active class from sibling elements.