这是应该发生的事情。
1.获取被点击链接的rel属性
2. 对于每个类为 'entry' 的 div:
(i)得到它的“左边”位置
(ii) 计算其外部高度
(iii) 遍历“a.tag_filter”的所有实例。如果它在“rel”中找到与最初单击的字符串相同的字符串,则将“V”加 1 并跳出循环。
(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});
}
});
});
}
});
});
希望这是有道理的
任何帮助,将不胜感激!
我可能正在做一些疯狂的事情,但我就是看不出来。
谢谢
最佳答案
在这里
$('a.tag_filter', this).each(function(){
var curTag = $(this).attr('rel');
if(curTag == selectTag){
v++;
return false;
}
});
在 $().each()
中返回 false 会中断包装集中每个元素的循环。
Returning 'false' from within the each function completely stops the loop through all of the elements (this is like using a 'break' with a normal loop). Returning 'true' from within the loop skips to the next iteration (this is like using a 'continue' with a normal loop).
此外,为了提高性能,我建议在每个 each()
中缓存 $(this)
,而不是多次引用它。
编辑:
进一步查看代码后,我认为应该执行以下操作
$('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 });
}
});
});
}
});
});
关于javascript - JQuery .each() 回调函数不会在每次迭代/循环中运行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1305362/