我使用Gridly库构建了一个元素网格,并希望最后一个元素是一个允许添加更多元素的按钮。每次单击此按钮时,它应该添加一个新元素作为倒数第二个,其中添加更多的按钮保留在最后。
我目前正在尝试将“最后一个”伪造选择器与.append,.before等组合使用。但没有运气。即使使用以下代码,它仍会在最后添加新元素。我有什么遗漏会造成这种情况吗?
创建所有默认的砖元素:
success: function(data)
{
var cycle = data['cycle'].result;
$.each( cycle, function( key, value )
{
var brick = "<div class='brick small' data-map='" + value + "'><a class='delete' href='#'>×</a><img src='images/tf2/" + value + ".jpg' onerror=\"javascript:this.src='images/default.jpg'\" /><h2><span>" + value + "</span></h2></div>";
$( ".gridly" ).append( brick );
});
var addBrick = "<div class='brick small'><a class='add' href='#'><img src='images/add.jpg' /><h2><span>Add New</span></h2></a></div>";
$( ".gridly" ).append( addBrick );
return $('.gridly').gridly();
}
回调以向网格添加新砖
$(document).on("click", ".gridly .add", function(event)
{
event.preventDefault();
event.stopPropagation();
var brick = "<div class='brick small' data-map='ctf_2fort'><a class='delete' href='#'>×</a><img src='images/tf2/ctf_2fort.jpg' onerror=\"javascript:this.src='images/default.jpg'\" /><h2><span>ctf_2fort</span></h2></div>";
$('.brick:last').before(brick);
return $('.gridly').gridly();
});