сценарий jQuery на странице с динамическим контентом

Question

На моей странице У меня есть статьи с динамическим контентом.

И я использую два сценария JQuery, чтобы фильтровать их

//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(); 
     } 
    }); 

На первой загрузке это нормально я вижу 10 статей все с изображениями.

Но когда я нажимаю загрузку, он загружает еще 2 статьи, но я вижу статьи без изображения.

Как я могу объединить эти два кода так, когда я нажимаю нагрузки больше, чтобы скрыть статьи без изображения

Answer 1

Вы можете дать статьи без изображений класс и фильтр по этому

$(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(); 
     } 
    }); 
    }); 

Answer 2

Вы знаете, что вы должны будете использовать его, так что написать функцию:

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

Затем ссылаться на него:

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