html 项目分页w变异观察员

Posted 2021-05-10

$(document).ready(function () {

   var singleArticle = $(this).find("#response .item"),
      filterNumber = 6,
      num1 = $(this).find("#response .item").length,
      num2 = filterNumber,
      totalPages = Math.ceil(parseInt(num1, 10) / parseInt(num2, 10));

   function sortItems() {
      // add page links
      for (p = 1; p <= totalPages; p++) {
         $("<a href='#' class='page-" + p + "'>" + p + "</a>").appendTo(".pages-wrapper .pages");
      }
      //add page classes to items
      for (i = 1; i <= num1; i++) {
         singleArticle.eq(i - 1).addClass("page-" + Math.ceil(i / 6));
      }
      //add active class to first 6
      $("#response .page-1").addClass("active");
      if ($(".pages > a").length) {
         $(".pages > a").remove();
         for (p = 1; p <= totalPages; p++) {
            $("<a href='#' class='page-" + p + "'>" + p + "</a>").appendTo(".pages-wrapper .pages");
         }
         // page click function
         $(".pages-wrapper .pages a").click(function () {
            var thePageNumber = $(this).attr("class");
            $("#response .item").removeClass("active");
            $("#response").find("." + thePageNumber).addClass("active");
            return false;
         })
      }
   }





   if (totalPages > 0) {

      //add pagination html
      $(".main-section > div:first-of-type").append("<div class='pages-wrapper'><h5>Pages</h5><div class='pages' /></div>");

      sortItems();

      // Select the node that will be observed for mutations
      var targetNode = document.getElementById('response');

      // Options for the observer (which mutations to observe)
      var config = {
         attributes: true,
         childList: true,
         subtree: true
      };

      // Callback function to execute when mutations are observed
      var callback = function (mutationsList, observer) {
         for (var mutation of mutationsList) {
            if (mutation.type == 'childList') {
               console.log('A child node has been added or removed.');

               function checkForItem(elementName) {
                  if ($(elementName).length >= 1) {
                     clearInterval(elementChecker);
                     var singleArticle2 = $("#response").find(".item"),
                        num3 = $("#response").find(".item").length,
                        num4 = filterNumber,
                        totalPages2 = Math.ceil(parseInt(num3, 10) / parseInt(num4, 10));

                     // add page links
                     for (p = 1; p <= totalPages2; p++) {
                        $("<a href='#' class='page-" + p + "'>" + p + "</a>").appendTo(".pages-wrapper .pages");
                     }

                     //add page classes to items
                     for (i = 1; i <= num3; i++) {
                        singleArticle2.eq(i - 1).addClass("page-" + Math.ceil(i / 6));
                     }
                     //add active class to first 6
                     $("#response .page-1").addClass("active");
                     if ($(".pages > a").length) {
                        $(".pages > a").remove();
                        for (p = 1; p <= totalPages2; p++) {
                           $("<a href='#' class='page-" + p + "'>" + p + "</a>").appendTo(".pages-wrapper .pages");
                        }
                        // page click function
                        $(".pages-wrapper .pages a").click(function () {
                           var thePageNumber2 = $(this).attr("class");
                           $("#response .item").removeClass("active");
                           $("#response").find("." + thePageNumber2).addClass("active");
                           return false;
                        })
                     }


                  }
               }
               var elementChecker = setInterval(function () {
                  checkForItem("#response .item");
               }, 500);
            } else if (mutation.type == 'attributes') {
               console.log('The ' + mutation.attributeName + ' attribute was modified.');
            }
         }
      };

      // Create an observer instance linked to the callback function
      var observer = new MutationObserver(callback);

      // Start observing the target node for configured mutations
      observer.observe(targetNode, config);



   }

});

.news-article-matrix {
	.switchable-grid {
		> .item {
			display: none;
			&.active {
				display: block;
				animation-delay: 0s!important;
			}
		}
	}
}

<div class="news-article-matrix">
   <div class="matrix-content">
      <div class="article-matrix">
         <div id="response" class="switchable-grid">
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
            <div class="item"></div>
         </div>
      </div>
   </div>
</div>