jQuery每个循环都不起作用

Question

我根据阅读其他一些stackoverflow问题整理了一些代码并在小提琴中测试它并且它有效JSFIDDLE

试图在我的项目中的clearFix函数中实现它（在底部），我无法使它工作。我试过把它放在很多地方，但它没有改变任何东西。甚至在代码中放置一些控制台日志以查看它到达的位置，它永远不会触发该功能。我只想在每3个具有col-md-3类的div中插入一个clearfix div。

我确信我缺乏知识我有些不对劲。我刚刚开始学习并将代码拼凑在一起。这是我的代码 -

(function () {
    'use strict';

    window.insta = {

        apiUrl: 'https://api.instagram.com/v1/users/self/feed?access_token=[token goes here]&callback=?',

        grams: {},

        init: function () {
            $.ajax({
                type: 'GET',
                url: insta.apiUrl,
                dataType: 'json',
                success: insta.success
            });
        },

        renderGrams: function (grams) {
            $.each(grams, function(index, gram) {
                insta.grams[gram.id] = gram;
                var gramHtml = '<div class="col-md-3"><p><img class="img-circle" style="margin-right: 5px" width="60" src="' + gram.user.profile_picture + '">' + gram.user.username + '</p><a href="#myModal" data-toggle="modal" data-media-id="' + gram.id +'">';
                if (gram.type === 'image') { gramHtml = gramHtml + '<img class="img-thumbnail" src="' + gram.images.low_resolution.url + '"/>'; }
                if (gram.type === 'video') { gramHtml = gramHtml + '<video class="img-thumbnail" src="' + gram.videos.low_resolution.url + '"/>'; }
                gramHtml = gramHtml + '</a></div>';
                $('.results').append(gramHtml);
            });
        },

        setupClickEvent: function () {
            $('a').click(function(){
                var mediaId = $(this).data('mediaId'),
                    gram = insta.grams[mediaId],
                    largeImage = gram.images.standard_resolution.url,
                    username = gram.user.username,
                    tags = gram.tags,
                    comments = '';

                $('.modal-title').html(username);
                $('.modal-body').html('<div class="col-md-6"><img class="img-responsive" src="' + largeImage + '"><div class="tagwrap">' + tags + '</div></div>');


                $.each(gram.comments.data, function(index, comment){
                    comments += '<p>' + comment.text + '</p>';
                });

                $('.modal-body').append('<div class="comment-container">' + comments + '</div>');
            });
        },

        success: function (responseData) {
            if (responseData.meta.code === 200) {
                insta.renderGrams(responseData.data);
                insta.setupClickEvent();
            } else {
                $('.results').html('<h1>An Error Occured</h1><p>' + responseData.meta.error_message + '</p>');
            }
        },

        clearFix: function () {
            $('.col-md-3').each(function(i,val){
                i++;
                if(i%3===0){
                    $(this).append('<div class="clearfix"></div>');
                }
            });
        },
    };

    // This actually fires fires everything off
    // Follow from here
    insta.init();
}());