JSFiddle - React, Tailwind, and code Playground

by honglonglong

HTML

<div id="rawXml"></div>
<div id="newslist" class="newslist-ref">
    <ul></ul>
</div>

CSS

#newslist {
    float: right;
    padding:5px;
    font-size:x-small;
    width: 100%
}
#newslist ul, #newslist li {
    margin:2px;
    padding:0px;
    list-style:none;
}
#newslist li {
    width:200px;
    overflow:hidden;
    padding:3px;
    border: 1px solid lightblue
}

JavaScript

var newsListArray = [{
    ModifiedBy: 'ModifiedBy1',
    Person: 'Person1',
    ListName: 'ListName1',
    ModifiedDate: 'ModifiedDate1'
}, {
    ModifiedBy: 'ModifiedBy2',
    Person: 'Person2',
    ListName: 'ListName2',
    ModifiedDate: 'ModifiedDate2'
}, {
    ModifiedBy: 'ModifiedBy3',
    Person: 'Person3',
    ListName: 'ListName3',
    ModifiedDate: 'ModifiedDate3'
}, {
    ModifiedBy: 'ModifiedBy4',
    Person: 'Person4',
    ListName: 'ListName4',
    ModifiedDate: 'ModifiedDate4'
}];

function startNewsList() {
    var result = $('#newslist ul');

    /*$.each(newsListArray, function(i, v) {
		result.append($('<li>').hide().text(v.ModifiedBy + ' has updated ' + v.Person + "'s " + v.ListName));
	});
	$('#newslist ul li').first().show("fast", function showNext(){
		$(this).next("li").show("fast", showNext);
	});*/
    //display onto page
    var result = $('#newslist ul');
    //result.html("");//not clear, prepend every time.
    //showArrayOneByOne(newsListArray,0);
    $.each(newsListArray, function (i, v) {
        result.prepend($('<li>').hide().text(v.ModifiedBy + ' has updated ' + v.Person + "'s " + v.ListName + " on: " + v.ModifiedDateDisplay));
    });
    $('#newslist ul li').last().show("fast", function showNext(){
		if(maxNumber >1){
			$(this).prev("li").show("fast", showNext);
			maxNumber --;
		}
	});
    var maxNumber = 10;
    //remove the LI exceed the max number
    $('#newslist ul li').each(function () {
        if (maxNumber <= 0) {
            $(this).remove();
        }
        maxNumber--;
    });
}

function showArrayOneByOne(arrayList, index){
    if(index<arrayList.length){
        var v=arrayList[index];
        var li=$('<li>').hide().text(v.ModifiedBy + ' has updated ' + v.Person + "'s " + v.ListName + " on: " + v.ModifiedDateDisplay);
        $('#newslist ul').prepend(li);
        li.show("slow", showArrayOneByOne(arrayList, index+1));
    }
}

startNewsList();