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

306
November 21, 2016, at 6:17 PM

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/

Answer 1

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');                            
    });
},
Rent Charter Buses Company
READ ALSO
Get text from outer span without text of inner elements

Get text from outer span without text of inner elements

I want to extract some text from an HTML element in Selenium and Javascript. .

410
Combobox on ajax returned fields

Combobox on ajax returned fields

Alright, I'm developing a system in which you add rows to a table, then enter data into it and save it. [nnn]I'm using ajax to return the complete table (which has the input tags).

543
The jQuery UI Datepicker doesn't Appear

The jQuery UI Datepicker doesn't Appear

https://jqueryui. com/datepicker/[nnn]When I use the sourcecode below and paste it into my html file:.

368
Best way to scroll Webpage using CSS or JavaScript? [closed]

Best way to scroll Webpage using CSS or JavaScript? [closed]

I am designing a site where scrolling is required. .

405