EDITED HTML ADDED

Question

我正在使用此脚本过滤我的项目，但我需要在actvive / selected项目中添加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;
    });
});

高度赞赏

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

EDITED HTML ADDED

菜单：

                        <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 我正在使用第n个子选择器去除某些.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.

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

EDITED HTML ADDED

1 个答案: