How to filter elements on click in js?


Tags: javascript,jquery,css

Problem :

This is the code I have so far:

$(".prod-page").each(function() {
    $(this).click(function() {
         $(".cat-item").filter(function(index) {
         // something goes here I guess?
         });
    });
});

HTML:

<div class="row">
    <div class="cat-item"></div>
    <div class="cat-item"></div>
<div class="cat-item"></div>
    (more here)
</div>

Dynamically adding the page buttons depending on number of items (12 per page):

numItems = $('.cat-item').length;
numPages = numItems / 12;
lastPage = numItems % 12;

for (i = 0; i <= numPages; i++) {
$('#page-counter').append('<div class="prod-page"></div>' );
}

if (lastPage >= 1) {
$('#page-counter').append('<div class="prod-page"></div>' );
}

$(".prod-page").each(function(i) {
$(this).text(++i);
});

.cat-item has a display: none set in css and there are multiple buttons with the class .prod-page.

When clicking on .prod-page button, I would like to .show first 12 elements, then the next 12 elements with the class .cat-item (undefined number of times).

Any idea how to approach this? The best would be modifying the code I've already written.



Solution :

try this -

when you generate the page buttons add some sort of page id

for (i = 0; i <= numPages; i++) {
    $('#page-counter').append('<div class="prod-page" data-pageid="'+i+'"></div>' );
}

then the click handler will know which page to show:

$(".prod-page").click(function() {
    var $button = $(this);
    var page_id = $button.data('pageid');
    var $items = $(".cat-item");
    for (var i=0; i< $items.length; i++) {
       if (i < page_id * 12 ||  i >= (page_id+1)*12 ) {
          $($items[i]).hide();
       }
       else {
          $($items[i]).show();
       }
    }
});

    CSS Howto..

    How to fill video element with poster image even if the poster image is a different aspect ratio than its video element? [duplicate]

    How to pass JavaFX variable into CSS style?

    How to fit a dynamic PHP form in a div (to be able to fit fullpage.js)?

    How to expand textarea to fit text vertically and horizontally?

    How to CSS the select field so that it occupy the entire cell of my table?

    How to display form output in the same page by hiding the form

    how to set two div's height equal with css

    Percentages in CSS: How are they calculated internally?

    How to apply CSS style for the current page link

    how to select a input using jquery

    How to create a button with a CSS-animated background?

    How to Style Social Media Links Correctly

    How do I override inline CSS with Class CSS? [duplicate]

    How to align contents in different containers using only css

    How do I align these links inside inline-blocks to the top?

    Flexbox: how to get divs to fill up 100% of the container width without wrapping?

    How to position text in a navigation “div.”

    How to display code blocks with word wrap and line number with jekyll markdown on github-pages

    How to make all input boxes ordered in a straight line? [closed]

    CSS HTML - How to add more outer colour on the drop down menus and more than one word per drop down

    How to preload css :hover background images

    HTML: how to make 2 tables with different CSS [closed]

    How to dynamically modify