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>

- 如果上传它将如下所示

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

- 附加到主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);

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

Answer 1

我明白了。我需要的只是两个数组和两个for循环。一个用于获取所有LI兄弟姐妹的数组。所以我的for循环使用jquery迭代一定数量的LI元素来查找img。我会在前几个LI元素中得到结果，例如索引1,2,3，我的数组中的四个将包含图像的路径。如果我从LI中删除图像，我使用第二个for循环来拼接第一个数组以删除＆＃34; undefined＆＃34;值。如果我删除LI中间的图像路径，这将总是给我结果，这将被移除并通过在数组中过滤而重新附加到主UL。

移除后Jquery ul li项目放置

1 个答案: