如何刪除和附加元素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>

等等

如果那樣，結果仍然是錯誤的

現在看來，這應該叫基於li元素a

因此，如果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']") );

這將獲得li的索引，該li的類以您的無序列表中的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'));