javascript - 如何删除和附加元素 li？

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/

有效

但我的情况是动态的。 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- 元素，因此它会处理您的动态情况。