Функция обратного вызова JQuery .each () не запускается на каждой итерации / цикле - PullRequest
Новая
       54

Функция обратного вызова JQuery .each () не запускается на каждой итерации / цикле

1 голос
/ 20 августа 2009

Вот что должно произойти.
1. Получить атрибут rel по нажатой ссылке
2. Для каждого div с классом 'entry':
(i) Получить левую позицию
(ii) Рассчитайте его внешнюю высоту
(iii) Перебрать все экземпляры «a.tag_filter». Если он находит в строке «rel» ту же строку, что и та, на которую щелкнули ранее, добавьте 1 к «V» и выйдите из цикла. (iv) Если «V» равно 0 после цикла, мы знаем, что тот же тег отсутствует в этом «.entry», поэтому затухайте.
(v) Как только затухание закончится, пройдитесь по всем «.entry» после затухающего и получите их «левые» значения.
(vi) Если левое значение исчезнувшей записи = левое значение текущего '.entry', тогда переместите его в новое верхнее значение.

Что сейчас происходит.
Он проходит через все правильные элементы «.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});
                    }
                    }); 
            });
        }   
    });
    });

Надеюсь, это имеет смысл
Любая помощь будет оценена! Я, вероятно, делаю что-то сумасшедшее, но я просто не могу это заметить. Спасибо

Ответы [ 2 ]

3 голосов
/ 20 августа 2009

здесь 

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

возврат false внутри $().each() прерывает цикл по каждому элементу в упакованном наборе.

Из документации

Возвращает 'false' изнутри каждого функция полностью останавливает цикл через все элементы (это как использовать «перерыв» с нормальным петля). Возвращая «истину» изнутри цикл переходит к следующей итерации (это похоже на использование «продолжить» с нормальный цикл).

Кроме того, я бы рекомендовал кэшировать $(this) внутри каждой each() в локальной переменной для производительности вместо того, чтобы ссылаться на нее несколько раз.

EDIT:

Посмотрев на код дальше, я думаю, что следующее должно сделать это 

$('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  });
                            }
                        });
                    });                                                                  
                }
         });  



 });
0 голосов
/ 22 июля 2010

Вам не нужно кэшировать $ (this), jQuery автоматически кэширует селектор this для обратных вызовов функций.

...