Ajax 如何在单击时换行事件之后加载div？

我正在Wordpress下创建一个单页公文包。每个库缩略图都是一个列表项
当您单击一个项目时，它会加载一个滑动抽屉（#DrawerContainer），使用ajax从文章中提取内容

我希望此抽屉显示在单击项目后的行上。 因为它是一个流动的布局，我不知道浏览器是否在一行中显示1、2、3、4或5个项目

我试图将我的抽屉添加到每个

，但我担心如果我单击缩略图， 滑块将打开并使其他缩略图跳到下一行

因此，我认为防止布局问题的最佳方法是仅在换行后调用抽屉

如何定位行中的最后一个li项，并在此行换行后加载div？

如果我不清楚，下面是我希望看到的代码 EDIT:如果您想动手，我刚刚将代码添加到JSFIDLE中

//第一行末尾（br/）
//如果我单击此项

//第二行末尾（br/）
//第4项的内容出现在这里
//第三排的末尾

这是我正在努力解决的代码

$(document).ready(function(){
    $.ajaxSetup({cache:false});
    $(".ProjectWrap,.mosaic-overlay,.mosaic-backdrop").click(function(){
        var post_link = $(this).attr("href");
        //$('#DrawerContainer').slideToggle(500);
        $("#DrawerContainer").html("loading...");
        $("#DrawerContainer").load(post_link + " #container > * ");
    return false;
    });

        //Here is the part I'm stuck with now

    $(#portfolio-list).click(function(){
        $("<br/>").append('<section id="DrawerContainer"></section>');
    });

        //I assume the #DrawerContainer will generate a br/

});

$（文档）.ready（函数（）{
$.ajaxSetup（{cache:false}）；
$（“.ProjectWrap、.mosaic overlay、.mosaic background”）。单击（函数（）{
var post_link=$（this.attr（“href”）；
//$（'抽屉容器'）。滑动切换（500）；
$（“#抽屉容器”）.html（“加载…”）；
$（“#抽屉容器”）.load（后链接+“#容器>*”）；
返回false；
});
//这是我现在一直坚持的部分
$（#公文包列表）。单击（函数（）{
$（“
”）追加（“”）；
});
//我假设#DrawerContainer将生成一个br/
});

在找这样的东西吗

---

这是我最初写的东西的延伸。希望这有帮助。

考虑使用

jsfiddle.com

，它会让用户更容易地帮助您。无论如何

。append（…）

不会这样做。。改用

.after（…）

。我想它的意思是jsfiddle.netow thx，我不再孤单了！：）我设法将所有内容都放在JSFIDLE中，但现在我无法加载ajax来测试它。我不熟悉JSFIDLE，也许一个就足以测试抽屉了。无论如何，这里是地址：把一个DIV放在一个UL里面不是一件好事（也就是说，有效），并且可能会给你带来问题。您可以在DIV之前关闭UL，然后重新打开另一个UL，或者根据需要将UL/LI对替换为DIV/DIV和样式。Hi@techfoobar，这非常接近我要找的。事实上，当我试图将您的代码调整到我的页面时，我注意到第一部分对于抽屉的工作来说是不必要的。我还将您的类更改为ID（我使用类过滤我的投资组合项目）。但是现在我很难将您的代码与我用来加载ajax的代码合并。。。我还需要用“当前”按钮打开/关闭（滑动切换）抽屉。如果你有点时间，能帮我吗？下面是更新的代码。我会在几个小时内抽出时间为您解决这个问题。您最新的代码似乎有一些问题，主要是您正在使用相同的ID创建多个元素。请注意，ID在整个DOM中必须是唯一的。否则，依赖于ID的调用将仅返回第一个匹配元素。这正是我们使用类来标识元素组和ID来标识单个元素的原因。更多信息请参见此：你是对的。因为每次都要删除上一个元素，所以要创建重复的ID。好的，thx，我知道ID和类之间的区别，但是因为我只是在学习jQuery语法，所以我犯了很多错误。：）我在检查代码时没有注意到ID加倍。你说的是“当前”身份证吗？当我写入

.removeAttr（'ID'）时，浏览器是否正在擦除ID还是只是隐藏（并保存在某个地方）？
$(document).ready(function(){
    $.ajaxSetup({cache:false});
    $(".ProjectWrap,.mosaic-overlay,.mosaic-backdrop").click(function(){
        var post_link = $(this).attr("href");
        //$('#DrawerContainer').slideToggle(500);
        $("#DrawerContainer").html("loading...");
        $("#DrawerContainer").load(post_link + " #container > * ");
    return false;
    });

        //Here is the part I'm stuck with now

    $(#portfolio-list).click(function(){
        $("<br/>").append('<section id="DrawerContainer"></section>');
    });

        //I assume the #DrawerContainer will generate a br/

});