Question

这是应该发生的事情。
1.获取点击链接的rel属性
2.对于每个有课程“入学”的div：
    （i）获得“左”位置     （ii）计算其外部高度
    （iii）循环遍历'a.tag_filter'的所有实例。如果它在'rel'中找到与oringinally点击的字符串相同的字符串，则将1添加到'V'并跳出循环。
    （iv）如果循环后'V'等于0，我们知道'.entry'中不存在相同的标签，因此将其淡出。
    （v）一旦淡出完成后，在淡出的那个之后循环遍历所有'.entry'并获得它们的'左'值。
    （vi）如果淡入的条目的左值=当前'.entry'的左值，则将其重新定位到新的'top'值。

目前正在发生什么。
它贯穿并淡出所有正确的'.entry'元素，并且只有在它们全部消失后才重新定位它们剩下的'.entry'元素。

在每个元素淡出之后，我希望重新定位循环运行，因此它基本上一次定位其余元素，而不是一次定位。

继承我的代码编辑：

$('a.tag_filter').click(function(e){
        e.preventDefault();
        var selectTag = $(this).attr('rel');

    $('div.spotlight_entry_container_grid').each(function(i){
        var $entry = $(this);
        var tagArray = [];

        $('a.tag_filter', this).each(function(){
            tagArray.push ($(this).attr('rel'));
        }); 

        if($.inArray(selectTag,tagArray) == -1){
            var leftPos = $entry.css("left"); 
                    var topPos = $entry.css("top"); 

            $entry.fadeOut(1000, function(){
                var nextLeftPos;
                            var nextTopPos;

                $('div.spotlight_entry_container_grid:gt('+i+')').each(function(j) {   
                    var $laterEntry = $(this); 
                    nextLeftPos = $laterEntry.css("left");
                                nextTopPos = $laterEntry.css("top");
                    //we need to keep the entries in their columns.
                    //matching left values will do it. No need to animate left values.
                    if(leftPos == nextLeftPos){
                        $laterEntry.animate({ top: topPos});
                    }
                    }); 
            });
        }   
    });
    });

希望这有意义任何帮助，将不胜感激！我可能正在做一些疯狂的事情，但我无法发现它。感谢

Answer 1

在这里

$('a.tag_filter', this).each(function(){
                        var curTag = $(this).attr('rel');
                        if(curTag == selectTag){
                                v++;
                                return false;
                        }
                });

在$().each()内返回false会中断循环遍历包装集中的每个元素。

来自documentation

从每个内部返回'false' 功能完全停止循环通过所有元素（这是比如使用正常的“休息” 环）。从内部回归“真实” 循环跳到下一次迭代（这就像使用'继续'一样一个正常的循环）。

另外，我建议在本地变量的每个$(this)内部缓存each()以获得性能，而不是多次引用它。

修改

在进一步查看代码之后，我认为以下内容应该这样做

$('a.tag_filter').click(function(e){ // prevent the default anchor behaviour e.preventDefault(); var selectTag = $(this).attr('rel'); $('div.entry').each(function(i){ var $entry = $(this); // get an array of the anchor tag rel attributes var tagArray = []; $('a.tag_filter', this).each(function() { tagArray.push ($(this).attr('rel')); }); // if we can't find the selected tag in the entries tags if ($.inArray(selectTag,tagArray) == -1) { var leftPos = $entry.css("left"); var topPos = $entry.css("top"); $entry.fadeOut(1000, function(){ var nextLeftPos; var nextTopPos; $('div.entry:gt('+i+')').each(function(j) { var $laterEntry = $(this); nextLeftPos = $laterEntry.css("left"); nextTopPos = $laterEntry.css("top"); // for the first element, set top and left to the faded out element values if (j == 0) { $laterEntry.animate({ top: topPos, left: leftPos }); } // for later elements in the loop, ste the values to the previous element values else { $laterEntry.animate({ top: nextTopPos, left: nextLeftPos }); } }); }); } }); });

Answer 2

您不需要缓存$（this），jQuery会自动缓存此选择器以进行函数回调。

JQuery .each（）回调函数不会在每个迭代/循环上运行

2 个答案: