Home/ Questions/Q 8890319
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T22:28:27+00:00

I have a list which is generated with ajax and I want everytime elements

  • 0

I have a list which is generated with ajax and I want everytime elements come they go to the top of the list:

My code is:

         $(document).ready(function() {
      var socket = io.connect('http://0.0.0.0:3000');
      var out = "";
      socket.on('populate', function(data) {
        $.each(data, function(i, obj) {
    if(obj['Ping'] == "FALSE"){
          out += "<li class='red'><font color='red'>"+obj.Vardas+" is down..."+obj.Data+"</font></li>";
      }
    else{
          out += "<li class='green'><font color='green'>"+obj.Vardas+" is up......."+obj.Data+"</font></li>";   
      }
        });
    $("#database > li:first-child").before(out);//.load(blinkColorRed());
      });
    });
    </script>
  </head>
  <body>
  <div style="float:right; overflow-y:scroll; height: 400px; width: 30%">
    <ul id ='database'></ul>
  </div>
  </body>
</html>

Data comes, scroolbox gets generated, but no list elements. If I remove “> li:first-child” list works, but the newest element goes to the bottom as with simple html(‘out’) before(out) doesn not work. Any ideas where I made a mistake?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The reason it doesn’t work with > li:first-child because the ul is initially empty so there are no elements to match the #database > li:first-child selector, so you are trying to put the elements before nothing. You could use .prepend()

    $("#database").prepend(out);
    • 0