在 JQuery 中倒数第二个插入元素

Question

我使用 Gridly 库构建了一个元素网格，并希望最后一个元素是一个允许添加更多元素的按钮。每次单击此按钮时，它应该添加一个新元素作为倒数第二个元素，添加更多元素的按钮保留在末尾。

我目前正在尝试将 "last" 伪选择器与 .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='#'>&times;</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='#'>&times;</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();
});

Answer 1

使用

$(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='#'>&times;</a><img src='images/tf2/ctf_2fort.jpg' onerror=\"javascript:this.src='images/default.jpg'\" /><h2><span>ctf_2fort</span></h2></div>";
    $( brick ).insertBefore( $(this).parent() );
    return $('.gridly').gridly();
});

编辑因为 gridly 插件为每块砖添加样式 "style="position: absolute;左：Xpx； top: Ypx;", 插入元素的位置无关紧要，因为所有 briks 已经有一个静态位置，并且在 gridly() 调用方法之后，只有新的 briks 被更新。所以，为了处理这个，我们应该制作一个副本砖块按钮，添加 be 砖块，添加一个砖块按钮并删除旧的砖块按钮，在此之后，我们可以调用 gridly() 方法。参见 JSFiddle example

var brick,button;
    brick = "<div class='brick small'><div class='delete'>&times;</div></div>";
    add_button = "<div class='brick small'><a class='add' href='#'>Add</a></div>";
$('.gridly').on("click", ".add", function(event) {
    event.preventDefault();
    event.stopPropagation();
    $('.gridly').append( brick);
    $('.gridly').append( add_button);
    $(this).closest('.brick').remove();
    $('.gridly').gridly();
});
$('.gridly').gridly();

在 JQuery 中倒数第二个插入元素

Insert element as second to last in JQuery

javascript

grid

jquery

selector