嵌套在each（）中的函数，该函数应用于所有元素，而不是单个元素

Question

我有一个用于将分页应用于一系列类的jquery脚本。大多数情况下，一切正常，除了我有一个嵌套函数（showPage），该函数仅应应用于当前类，而应在所有类中使用元素，并将操作应用于最后一项。

已经尝试过切换到for循环而不是切换到each循环，但是提供了相似的功能，但存在相同的问题。

$(document).ready(function() {

  var lists = document.getElementsByClassName('content_display');

  listSize = 5;

  var fourWide = window.matchMedia("(max-width: 800px)");

  var threeWide = window.matchMedia("(max-width: 600px)")

  if (fourWide.matches) {

    // Screen is less than 800px

    listSize = 4;

  }

  if (fourWide.matches) {

    // Screen is less than 600px

    listSize = 3;

  }

  $(lists).each(function() {

    var contentCount = $(this).find('ul li').length

    var pageCount = contentCount / listSize;

    if (contentCount < listSize)

      $(this).find(".content_more").hide()

    var $e = $(this)

    var $f = $(this).find('.content_item')

    for (var i = 0; i < pageCount; i++) {

      $(this).find(".pagination").append('<a href="#">' + (i + 1) + '</a> ');

    }

    $(this).find(".pagination a").first().addClass("active")

    showPage = function(page) {

      $f.hide();

      $f.each(function(n) {

        if (n >= listSize * (page - 1) && n < listSize * page)

          $(this).show();

      });

    }

    showPage(1);

    $(this).find(".pagination a").click(function() {

      $e.find(".pagination a").removeClass("active");

      $(this).addClass("active");

      showPage(parseInt($(this).text()))

    });

  });

})