段落編號更改HTML JAVASCRIPT

Question

我正在使用列表，可以通過以下代碼用JS添加哪些元素：

function getMovementButtons(size, articleId, articleTitle, articleType){
   var lowerArticleType = articleType.toLowerCase();
   var html = '<div>'+
                  '<span style="vertical-align: top">'+ size + 
                      '<span style="vertical-align: top">.</span> '+
                  '</span>'+
                  '<span style="vertical-align: top" class="'+lowerArticleType+'-title displaying-'+lowerArticleType+'-id' + articleId +'">' + articleTitle + '</span>' + 
                  '<input class="'+lowerArticleType+'-button-delete"  type="button" value="' + '<%= LanguageUtil.get(pageContext, "global.action.delete")%>' + '" onclick="removeArticle(this,\''+articleType+'\')"/>' +
                  '<div class="'+lowerArticleType+'-div-move"><input class="'+lowerArticleType+'-button-up" type="button" value="" onclick="moveArticleUp(this,\''+articleType+'\')"/>' + 
                      '<input class="'+lowerArticleType+'-button-down" type="button" value="" onclick="moveArticleDown(this,\''+articleType+'\')"/>' + 
                  '</div>'+
              '</div>';
    return html;

我有一個功能removeArticleLine。

function removeArticleLine(button) {
    var parentDiv = button.parentNode
    var articleListDiv = parentDiv.parentNode;
    articleListDiv.removeChild(parentDiv);
}

有一個問題，因為如果我刪除一個對象，段落不會更改其編號。 我想請您提示一下如何使用JS更改這些數字。 我添加了可以幫助我們的工作功能。 它正在正確地移動所有內容：

function moveArticleUp(button, articleType) {
    var articleDiv = button.parentNode.parentNode;

    var parentDiv = articleDiv.parentNode;
    var prevArticleDiv = articleDiv.previousElementSibling;

    if (prevArticleDiv && prevArticleDiv.tagName == 'DIV') {
        var articleIdValue = getArticleIdValue(articleType);
        var ids = articleIdValue.split(',');
        var articleId = getArticleIdFromArticleDiv(articleDiv, articleType);
        var articleIdIndex = ids.indexOf(articleId);
        swapPosition(ids, articleIdIndex, articleIdIndex - 1);
        setArticleIdValue(articleType, ids.join());

        removedArticleDiv = parentDiv.removeChild(articleDiv);
        parentDiv.insertBefore(removedArticleDiv, prevArticleDiv);
        console.log(articleIdIndex);
        prevArticleDiv.firstElementChild.innerHTML = articleIdIndex + 1 + '<span style="vertical-align: top">.</span>  ';
        articleDiv.firstElementChild.innerHTML = articleIdIndex + '<span style="vertical-align: top">.</span>  ';
    }
}


function moveArticleDown(button, articleType) {
    var articleDiv = button.parentNode.parentNode;

    var parentDiv = articleDiv.parentNode;
    var nextArticleDiv = articleDiv.nextElementSibling;

    if (nextArticleDiv) {
        var articleIdValue = getArticleIdValue(articleType);
        console.log(articleIdValue);
        var ids = articleIdValue.split(',');
        var articleId = getArticleIdFromArticleDiv(articleDiv, articleType);
        console.log(articleId);
        var articleIdIndex = ids.indexOf(articleId);
        console.log(articleIdIndex);
        swapPosition(ids, articleIdIndex, articleIdIndex + 1);
        setArticleIdValue(articleType, ids.join());
        console.log(ids.join());

        removedArticleDiv = parentDiv.removeChild(nextArticleDiv);
        parentDiv.insertBefore(removedArticleDiv, articleDiv);
        console.log(nextArticleDiv.firstElementChild.innerHTML);
        console.log(articleDiv.firstElementChild.innerHTML);
        nextArticleDiv.firstElementChild.innerHTML = articleIdIndex + 1 + '<span style="vertical-align: top">.</span>  ';
        articleDiv.firstElementChild.innerHTML = articleIdIndex + 2 + '<span style="vertical-align: top">.</span>  ';
    }
}

讓我添加所顯示表的兩個屏幕截圖：

http://imgur.com/a/EOfkk

http://imgur.com/a/R9oru

Answer 1

刪除一行后，應循環元素數組並為其分配新的數字。 該代碼未經測試，但應該可以工作

function removeArticleLine(button) {
    var parentDiv = button.parentNode;
    // getting the number of deleting div
    var divNumber = parseInt(parentDiv.firstChild.textContent); 

    var articleListDiv = parentDiv.parentNode;
    articleListDiv.removeChild(parentDiv);

    // we need to loop elements after deleted div, because elements before did not change theit number
    for (var i = 0 || divNumber; i < articleListDiv.children.length; i++) {
       //changing number
       articleListDiv.children[i].firstElementChild.innerHTML = (i + 1) + '<span style="vertical-align: top">.</span> ';
    }
}