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 change css style value using php in a for loop?

    How to limit a to only three lines?

    How to completely gray out an image with css?

    How to import CSS from node_modules in webpack angular2 app

    How to revert back to a value in css [closed]

    How to strongly force line-height in css, with no streches?

    How to set a image/icon width that was specified through css content property?

    How to clip the top bar with screen

    How i can make it wiht css3?

    How to use localhost to host my HTML and CSS website

    CSS Column Help: How do I get a column within a column?

    How to change both fill and stroke in svg with css

    How to verify that google web font is working or not?

    How do I change properties of text that's being imported via php

    How do I fade in a div that has a set opacity?

    How can I split code-blocks into a list?

    How to slide these divs continuously in loop

    How to debug CSS/Javascript hover issues

    How to strip CSS from a button in a jQuery Mobile dialog

    How Do I Remove a CSS Value

    How to apply CSS using User Scripts

    how to change the background of a css-class by hover a button?

    How to create a scrollable element within a floated element?

    Need to show submenu to the right of it's parent item

    How to use a different stylesheet for iphone or android?

    How to Set Up a Responsive Background-Image with CSS

    knockout.js how to bind dynamic css

    How to align div objects in rows

    How to use jQuery to fade in/out li a:hover css background-color?

    How to indent input controls for a nested HTML list using CSS to a single column