删除后的Jquery ul li项目放置

我目前正在编写一段UI代码，当上传照片时，它会使用模板动态上传。这样，图像在一个小正方形

li

元素中重新调整大小。这样做的目的是为了让更多的人上传照片，顶部的

li

充当一个管理面板，滚动到他们想要编辑或删除的图像

除了从

li

中删除图像时出现的问题外，我的一切都正常。我使用动态创建的

li

索引匹配顶部

li

索引，以便滚动到正确的图像。当我删除图像时，它只删除索引位置。理想情况下，我希望图像在索引上移动并保持排序

-Html （应该是这样的）

---

---

-我得到的最远的结果是删除和替换在索引方面彼此正确的图像

我明白了。我只需要两个数组和两个for循环。一个用于获取所有

LI

同级的数组。因此，我的for循环使用jquery在常量

LI

元素上迭代以查找img。我会在第一对

LI

元素中得出结果，例如数组中的索引1、2、3和4将包含一个图像路径。如果我从LI中删除图像，我将使用第二个for循环将图像拼接到第一个数组中，以删除“未定义”的值。这将始终给我一个结果，如果我在一个<代码> LI<代码>的中间删除一个图像路径，它将通过对数组进行过滤而被删除并重新附加到主<代码> UL>代码>。

“我希望图像在索引上移动并保持排序。”根本不清楚这意味着什么。你能展示一下你现在拥有的删除代码，以及你想在删除之前和之后看到的

LIs

示例吗？对不起，伙计，第一次发布。有点不清楚如何解释这种情况我自己笑了，但我给了它一个机会，希望我没有混淆你。谢谢你的调查。

<ul class="mainul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>

<ul class="mainul">
<li><img blah blah blah></li> "index 0"
<li><img blah blah blah></li>  "index 1"
<li><img blah blah blah></li>  "index 2"
<li><img blah blah blah></li>  "index 3"
<li>5</li>
<li>6</li>
<li>7</li>
</ul>

<script type="text/html" id="test1">
    {{#upload}}<li><img src="{{ fpath }}" alt="" height="38" width="38"/></li>{{/upload}}
        </script> 

$.fn.exchangePositionWith = function (selector) {
               var other = $(selector);
                this.after(other.clone());
                other.after(this).remove();
          };




 $("#output2").on("click", ".deletimg", function () {
                var value = $(this).attr("data-id");
                var Id = 0;
                var Id = $(this).closest("li").index();
                $('#thumb-top li:eq(' + (Id) + ')').find('img').remove();
                $('#thumb-top li:eq(' + (Id) + ')').text(Id);
                $('#thumb-top li:eq(' + (Id) + ')').exchangePositionWith('#thumb-top li:eq(' + (Id - 1) + ')');
                // $("#thumb-top li:eq(' + (Id) + ')')".exchangePositionWith("#thumb-top li:eq(i)");
                // $('#thumb-top li:eq(' + (Id) + ')').find('img').text(Id);

                alert(Id);
            });

 var srcid = $('#thumb-top li:eq(' + (dataid) + ')').find('img').attr('src');
                var srcid2 = $('#thumb-top li:eq(' + (dataid) + ')').next().find('img').attr('src');
                var srcposition = $('#thumb-top li:eq(' + (dataid) + ')').next().index()
                var srcposition2 = $('#thumb-top li:eq(' + (dataid) + ')').nextAll().index()
                if (typeof srcid2 === 'undefined') {
                    $('#thumb-top li:eq(' + (dataid) + ')').find('img').remove();
                    $('#thumb-top').appendTo(srcposition2);
                };
                $('#thumb-top li:eq(' + (srcposition) + ')').find('img').remove();
                $('#thumb-top li:eq(' + (dataid) + ')').find('img').attr('src', srcid2);