删除后Jquery li项的放置

Question

我目前正在编写一段UI代码，在上传照片时，它使用模板动态上传。这样，图像就可以在一个小的正方形li元素中调整大小。这样做的目的是，上传照片的人越多，顶部的li就会充当管理面板，滚动到他们想要编辑或删除的图像。

在从li中删除图像时，除了这个问题之外，我已经做好了一切工作。我使用动态创建的li索引来匹配顶部的li索引，以便滚动到正确的图像。当我删除图像时，它只删除索引位置。理想情况下，我希望图像在索引上移动并保持排序。

-Html (应该是这样的)

<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>

-If上传它会像这样

<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>

-Template附加到主UL

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

**问题是，如果我试图删除索引2中的图像，我希望所有图像从2到折叠到刚刚删除的索引。

到目前为止，-Code我一直在玩

$.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);

我得到的-Farthest是删除和替换在索引方面彼此正确的图像。

Answer 1

我想通了。我只需要两个数组和两个循环。一个数组，用于获取所有的LI兄弟姐妹。因此，我的for循环使用jquery在常量的LI元素上迭代查找img。我会在前两个LI元素中得到结果，例如，数组中的索引1、2、3和4将包含图像的路径。如果从安莉删除图像，则使用第二个for循环来拼接第一个数组以删除“未定义”值。这将始终给出结果，如果我删除LI中间的图像路径，该路径将被删除并通过数组过滤重新附加到主UL。