jQuery script on a page with dynamic content

Question

On my page I have articles with dynamic content.

And I use two jQuery scripts to filter them

//Load more // less
  $(document).ready(function () {
  $('#article-list article:gt(10)').hide();
  $('#loadMore').click(function () {
  $('#article-list article:hidden:lt(2)').show();
      });
    });
    //hide articles with no image
  $('.myClass').each(function(){
       if($(this).attr('src') === ""){
          $(this).closest('article').hide();
       }
    });

On the first load it's okay I see 10 articles all with images.

But when I click load more it loads 2 more articles but I see articles with no image.

How can I combine those two codes so when I click load more to hide the articles with no image

it exists, if i remove the load more script it it will hide the articles without image. — em0tic0n
– em0tic0n, Commented Feb 10, 2015 at 23:50
Had you indented your code, you would have seen that the last piece of code with the each loop, is outside the DOM ready handler. Is this code in the head, if so you have to place the loop inside the DOM ready handler — adeneo
– adeneo, Commented Feb 10, 2015 at 23:52

Musa · Accepted Answer · 2015-02-11 00:10:14Z

1

You can give the articles without images a class and filter on that

  $(document).ready(function () {
    $('#article-list article:gt(10)').hide();
    $('#loadMore').click(function () {
      $('#article-list article:not(.noimg):hidden:lt(2)').show();
    });
  //hide articles with no image
    $('.myClass').each(function(){
      if($(this).attr('src') === ""){
        $(this).closest('article').addClass('noimg').hide();
      }
    });
  });

answered Feb 11, 2015 at 0:10

Musa

97.9k17 gold badges123 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Drifter · Accepted Answer · 2015-02-10 23:58:13Z

1

You know you'll need to reuse it, so write a function:

function hideArticlesWithNoImages(){ 
   $('.myClass').each(function(){
      if($(this).attr('src') === undefined || $(this).attr('src') === ''){
         $(this).closest('article').hide();
      }
   });
}

Then reference it:

$(document).ready(function () { 
   $('#article-list article:gt(10)').hide();
   $('#loadMore').click(function () {
      $('#article-list article:hidden:lt(2)').show();
      hideArticlesWithNoImages();
    });
   hideArticlesWithNoImages();
});

answered Feb 10, 2015 at 23:58

Drifter

2811 silver badge9 bronze badges

Collectives™ on Stack Overflow

jQuery script on a page with dynamic content

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related