Question

我的HTML代码如下：

<ul class="list">
    <li id="thumb-view-1">view 1</li>
    <li id="thumb-view-2">view 2</li>
    <li id="thumb-upload-3">upload 3</li>
    <li id="thumb-view-4">view 4</li>
    <li id="thumb-view-5">view 5</li>
</ul>
<button id="test">Test</button>

我的javascript代码如下：

<script type="text/javascript">
    $('#test').on("click", function(e){
        var a = 3;
        for(var i = 1; i <= 5; i++) {
            if(i == a) {
                $('#thumb-upload-'+i).remove();
                var res = '<li id="thumb-view-'+i+'">view '+i+'</li>';
                $('#thumb-view-'+(i-1)).after(res);
            }

        }
    });
</script>

演示：https://jsfiddle.net/oscar11/eb114sak/

它有效

但我的情况是dinamyc

var a的值介于1 - 5之间。因此var a的值可以是1或2或3或4或5

虽然ul标签有5个li标签。并且5 li标签可以具有不同的id类型

因此除了上面的标签li之外，我还举了另一种形式的例子

像这样：

<ul class="list">
    <li id="thumb-upload-1">upload 1</li>
    <li id="thumb-view-2">view 2</li>
    <li id="thumb-view-3">view 3</li>
    <li id="thumb-view-4">view 4</li>
    <li id="thumb-view-5">view 5</li>
</ul>

等

如果那样，结果仍然是错误的

似乎应该根据a

调用li元素

因此，如果a = 3，则删除第三个li标签并附加

但是，我仍然感到困惑

我该怎么做？

Answer 1

不是删除/追加，而是尝试replaceWith：

$('#test').on("click", function(e){
    var a = 3;
    for(var i = 1; i <= 5; i++) {
        if(i == a) {
            var res = '<li id="thumb-view-'+i+'">view '+i+'</li>';
            $('#thumb-upload-'+i).replaceWith(res);             
        }           
    }
});

这只会替换匹配的#thumb-upload-元素，因此它会处理您的动态案例。

Answer 2

一个简单的解决方案可能是使用replaceWith和index作为

var index = $( "ul.list" ).index( $("li[id^='thumb-upload']") );

这将获得在您的无序列表中以thumb-upload开头的类的索引

$("li[id^='thumb-upload']").replaceWith('<li id="thumb-view-'+index +'">view '+index +'</li>';)

以上语句将使用您的自定义HTML

替换该列表项

另一个简单的解决方案是只更改ID，因为我没有看到其他更改

$("li[id^='thumb-upload']").attr('id', $("li[id^='thumb-upload']").attr('id').replace('upload','view'));

如何删除和追加元素li？

2 个答案: