Question

我有一个像这样的简单引导网格

    <div class="container-fluid">
        <div id="parent">
            <div class="row row-striped">
                <div class="category1 col-xs-12">
                    //of course more cols and contents in them
                </div>
            </div>
        </div>
   </div>

我用带ID的按钮对其进行过滤（感谢https://codepen.io/terf/post/jquery-filter-divs）

    <button class="btn btn-link" id="category1">Category 1</button>

但是因为我需要每隔一行有一个背景，所以我决定每2个项目添加一个带jQuery的新行。这会导致我的过滤器出现问题，因为每当我过滤时，新行都会被保留（并且为空）。

这是Javascript部分：

<script type="text/javascript">
    function alignDivs() {
        var $mainElem = $('.row.row-striped'),
                $parent = $mainElem.parent(), // div#parent
                $items = $mainElem.children(':gt(1)').detach(); // detach all +1 items

        if ($items.length) {
            for (var i = 0; i < $items.length; i = i + 2) { // 2 items per row
                var $row = $('<div class="row row-striped">').append($items.slice(i, i + 2));
                // new row with previously detached items
                $parent.append($row);
            }
        }
    }

    alignDivs(); //initially align cols/rows

    $(document).ready(function () {
        var $btns = $('.btn').click(function () {
            if (this.id === 'all') {
                $('#parent').find('> .row > div').fadeIn(450);
                alignDivs(); //reload col/row layout
            } else {
                var $el = $('.' + this.id).fadeIn(450);
                $('#parent').find('> .row > div').not($el).hide();
                alignDivs(); //reload col/row layout
            }
            $btns.removeClass('active');
            $(this).addClass('active');

        });
    });
</script>

我尝试了类似.on（＆＃39;更改＆＃39;）或删除前一行（.eq（-2））之类的内容，但它并没有像我预期的那样工作。例如，当我删除前一行之前，它仍然删除带有我的项目而不是空项目的那一行。

我想要的是连续两个项目，然后打开一个新项目，如果过滤器后只有2个项目，请删除它们之间的新行，使其一行再次包含2个项目 - 并且不是每行1件。

这是我当前代码的jsFiddle，如果您点击网站或在线商店，您可以看到问题： https://jsfiddle.net/a3e7xmho/1/

Answer 1

终于找到了解决方案。

诀窍是使用jQuery动态地将背景设置为cols本身而不是行，并检查：visible-state。

function setBackgroundPositions() {
        var width = $('.row-striped').width();
        $('.col-project:visible').each(function(i) {
            if (i % 4 >= 2) {
                $(this).css('background-image', 'none');
            } else {
                $(this)
                        .css('background-image', 'url("/img/projects/image.png")')
                        .css('background-position', ((i % 4) * -1 * (width/2)) + "px 0")
                        .css('background-size', 'cover');
            }
        });
    }

结合jQuery过滤和Bootstrap行

1 个答案: