通过 AJAX 为动态添加的内容设置背景颜色

如何解决通过 AJAX 为动态添加的内容设置背景颜色

我在为 AJAX 动态添加的 li 元素设置背景颜色时遇到问题。

我不能使用纯 css，因为它还会在列表末尾标记新添加的项目。

我在代码末尾尝试了这个解决方案，但它仍然不起作用。当我通过 AJAX 添加或删除项目时，背景颜色设置将消失。

$(document).ready(function() {
    listItems.eq(0).css({backgroundColor: '#441515'});
    listItems.eq(1).css({backgroundColor: '#442415'});
    listItems.eq(2).css({backgroundColor: '#443a15'});
});
$(document).ajaxComplete(function(){
    listItems.eq(0).css({backgroundColor: '#441515'});
    listItems.eq(1).css({backgroundColor: '#442415'});
    listItems.eq(2).css({backgroundColor: '#443a15'});
});

这是jquery部分代码：

/*
DELETE ITEM VIA AJAX
*/

// event listener must be attached to todoapp__list which is out of block changed by ajax
todoList.on('click','.todoapp__list-delete',function(event) {
event.preventDefault();

var stringId = $(this).attr('href');
    id = stringId.substring(stringId.indexOf('=') + 1,stringId.indexOf('&') ); // get id number of deleted item from href with url directed to delete-item.php
    // id is between first = and first & in url string

// Dialog window confirmation if we want to remove item
var confirmDelete = confirm('Chcete danu polozku naozaj vymazat?');

// if click on yes,then AJAX
if (confirmDelete == true) {

    $.ajax({
        url: "_inc/delete-item.php",// get url form action parameter of form add-item
        type: 'POST',// send data via POST method
        dataType: 'json',// received data in format JSON
        data: 'id=' + id  // posiela data namiesto formulara z html => data to be sent to the server. If the HTTP method is one that cannot have an entity body,such as GET,the data is appended to the URL.
    }).done(function (data) {
        if (data.status === 'success') { // check if add-item.php show success for process of data insertion to table
            // get index.php with actual list of li and append last to end of list
            $.ajax({ url: baseURL,}).done(function(html) {
                var newList = $(html).find('.todoapp__list-items');
                    currentList = $('.todoapp__list');

                currentList.html(newList);
            });
        };
    });
};

});

这是 HTML 代码：

        <ul class="todoapp__list">
            <?php
                if ( ! empty($data) ){
                    foreach ( $data as $item ) {
                        echo '<li id="item-' . $item['id'] . '" class="todoapp__list-items"><span class="editable-span">' . $item['text'] . '</span>';
                        echo '<div class="todoapp__list-controls float-right">';
                        echo '<a href="edit.php?id=' . $item['id'] . '&form-name=edit"class="todoapp__list-edit">edit</a>';
                        echo '<a href="delete.php?id=' . $item['id'] . '&form-name=delete"class="todoapp__list-delete"><i class="fas fa-times"></i></a>';
                        echo '<a href="transfer-item.php?id=' . $item['id'] . '"class="todoapp__list-status"><i class="fas fa-check-circle"></i></a>';
                        echo '<a href="" class="todoapp__list-order"><i class="fas fa-sort"></i></a>';
                        echo "</div></li>";
                    };
                } else {
                    echo '<span>there are no tasks on your toapp</span>';
                };
            ?>
            </ul>

谢谢