JQuery - Loop through each case of a class from a point

Question

I am creating a self scrolling, auto updating table and need to search through through elements of a class from a certain point. My code currently is this:

var nextScroll;
setInterval(function() {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
    $('.seen').removeClass('seen');
    $('html, body').animate({
      scrollTop: 0
    }, 2000);
  } else {
    $('.job-item:not(.seen)').each(function() {
      var visible = $(this).visible();
      if (!visible) {
        nextScroll = $(this).offset().top;
        $(this).addClass("current-scroll");
        return false;
      } else {
        $(this).addClass('seen');
      }
    });
    $('html, body').animate({
      scrollTop: nextScroll
    }, 2000);
  }
}, 7000);

setInterval(function() {
  $.ajax({
    type: 'POST',
    url: 'dashboard-table.php',
    success: function(msg) {
      $("#table-container").html(msg);
      console.log("loaded");
    }
  });
}, 5000);

It basically scrolls down to the next .job-item which is not completely on screen, using the jquery.visible plugin. The issue is that as the page is updated via ajax, the "seen" elements lose the seen class, meaning I would like to store which element was last visible and search over the rows from there.

That is unless anyone has any alternatives which would be greatly appreciated.

FIDDLE: http://jsfiddle.net/yn4wxsej/

The seen elements have a unique id or some unique attribute to work on? — Irvin Dominin, Sep 23 '15 at 12:04
Updated my question, sorry for the poor fiddle I don't know how to use ajax requests on it — Blease, Sep 23 '15 at 12:22
While Ashish, and Kaushal, for some reason indicate that a JS Fiddle is required it is not. It's a useful bonus and often much appreciated, but not required. What we *do* require is that you include enough (minimal) code to reproduce your problem in the question itself (so that when other sites die, reorganise, or suffer outages, your question still makes sense to others in the future). Please see the "[ask]" and "[mcve]" guidelines for explanations and guidance. — David Thomas, Sep 23 '15 at 12:28
Are you trying to implement some kind of infinite scrolling? If so look at this [waypoints](http://imakewebthings.com/waypoints/) — xxxmatko, Sep 23 '15 at 12:30
@JoshLukeBlease each element can have a unique id coming from the server? Or the order is always the same? — Irvin Dominin, Sep 23 '15 at 12:33
@xxxmatko no, I'm trying to create an "unmanned" dashboard which will scroll over the elements — Blease, Sep 23 '15 at 12:35
Calling this `$("#table-container").html(msg);` you always clear the table contents. Why just not append the content rather then clearing it every time — xxxmatko, Sep 23 '15 at 12:47
@xxxmatko the contents may change and I don't want an infinitely long table, there may also be more items than can be seen on one page at once, see my fiddle. — Blease, Sep 23 '15 at 12:52
Could you just describe the desired behavior? I saw your fiddle, but I am getting lost in what is wrong with it, 10q — xxxmatko, Sep 23 '15 at 12:55
@xxxmatko I need the table to auto update every so many seconds, lets say 5, but I also need it to automatically scroll across the table elements. It scrolls down to the first element that is not completely on screen every 2 seconds until it reaches the end, at which point it scrolls back to the top. The issue in my fiddle is that when the table is updated, the 'seen' class is lost and so the system scrolls to the top element, not the next one down. — Blease, Sep 23 '15 at 13:07

score 0 · Answer 1 · answered Sep 23 '15 at 13:10

You can fill a seen array (or jQuery data or localstorage) with the seen post id, then when you fetch your data apply the class seen to the seen elements like, but it's important that your rows have a unique id or attribute.

For demo purposes I'm using an hypothetical id of the row, but it can be everything.

Code:

var seen=[];

in you setTimeout function:

$(this).addClass('seen');
if(seen.indexOf($(this).id) == -1){
   seen.push($(this).id);
}

and in your success function:

success: function(msg) {
    $("#table-container").html(tabledata);
    $.each(seen, function(i,e){
        $('#'+e).addClass('seen');                            
    });
},

JQuery - Loop through each case of a class from a point

1 Answers1