Úprava funkce Javascript

Zdravím všechny!!

poprosil bych o radu..

Mám zde kód, který mi hezky filtruje záznamy.
To funguje jak má, já bych ovšem potřeboval v sekci "all" vyfitrovat na začátku od každé kategorie jeden záznam. Ostatní schovat. Poté poslední věc, a to zobrazit vždy jen 3 záznamy (v "All" vždy jeden od jedné kategorie, jedna položka a u samostatné kategorie zobrazit 3 její záznamy.)

Může mi někdo nějak nasměrovat? Co udělat? :D

PHP kód:

$(function(){
  $('#all').click(function(){
    $('.item').show();
    return false;
  });
  
  $('#fb').click(function(){
    $('.item').show();
    $('.item').not('.fb').hide();
    return false;
  });
  
  $('#insta').click(function(){
    $('.item').show();
    $('.item').not('.insta').hide();
    return false;
  });
  
  $('#tw').click(function(){
    $('.item').show();
    $('.item').not('.tw').hide();
    return false;
  });
}); 


Menší nástřel pár minutovej ... není otestovaný, ale myšlenka tam je.

Kód:

jQuery(function(){
	jQuery( '[data-filter]' ).on( 'click', function(){
		var itemClass = '.item';
		var filterType = jQuery( this ).attr( 'data-filter' ); // mám co chci filtrovat

		// označím si všechny že je chci skrýt
		jQuery( itemClass ).addClass( 'to-hide' );

		if( filterType == 'all' ) {
			// od každýho jedno
			// tohle by chtělo udělat lépe
			jQuery( `${itemClass}.facebook:first-of-type` ).addClass( 'to-view' );
			jQuery( `${itemClass}.instagram:first-of-type` ).addClass( 'to-view' );
			jQuery( `${itemClass}.twitter:first-of-type` ).addClass( 'to-view' );
		} else {
			// vyber první tři položky z kategorie
			jQuery( `${itemClass}.${filterType}:nth-child(-n+3)` ).addClass( 'to-view' );
		}

		// skryju co nechci
		jQuery( `${itemClass}.to-hide:not(.to-view)` ).hide();

		// zobrazím co chci
		jQuery( `${itemClass}.to-view` ).show();

		// odjebu pomocný třídy
		jQuery( itemClass ).removeClass( 'to-hide' );
		jQuery( itemClass ).removeClass( 'to-view' );
	});
});

Původně odeslal Doctore97 ↪

Menší nástřel pár minutovej ... není otestovaný, ale myšlenka tam je.

Kód:

jQuery(function(){
	jQuery( '[data-filter]' ).on( 'click', function(){
		var itemClass = '.item';
		var filterType = jQuery( this ).attr( 'data-filter' ); // mám co chci filtrovat

		// označím si všechny že je chci skrýt
		jQuery( itemClass ).addClass( 'to-hide' );

		if( filterType == 'all' ) {
			// od každýho jedno
			// tohle by chtělo udělat lépe
			jQuery( `${itemClass}.facebook:first-of-type` ).addClass( 'to-view' );
			jQuery( `${itemClass}.instagram:first-of-type` ).addClass( 'to-view' );
			jQuery( `${itemClass}.twitter:first-of-type` ).addClass( 'to-view' );
		} else {
			// vyber první tři položky z kategorie
			jQuery( `${itemClass}.${filterType}:nth-child(-n+3)` ).addClass( 'to-view' );
		}

		// skryju co nechci
		jQuery( `${itemClass}.to-hide:not(.to-view)` ).hide();

		// zobrazím co chci
		jQuery( `${itemClass}.to-view` ).show();

		// odjebu pomocný třídy
		jQuery( itemClass ).removeClass( 'to-hide' );
		jQuery( itemClass ).removeClass( 'to-view' );
	});
});

Děkuju, ale nějak mi to vůbec nepomohlo :D Když dosadím tvůj kód, nereaguje filtr vůbec.

Původně odeslal Tomina10 ↪

Děkuju, ale nějak mi to vůbec nepomohlo :D Když dosadím tvůj kód, nereaguje filtr vůbec.

Protože ho musíš přepsat, napsal jsem to obecně = myšlenka. Jestli nemusíš JS, tak někam hoď komplet kod (třeba https://jsfiddle.net/) a já ti to připravím.

Původně odeslal Doctore97 ↪

Protože ho musíš přepsat, napsal jsem to obecně = myšlenka. Jestli nemusíš JS, tak někam hoď komplet kod (třeba https://jsfiddle.net/) a já ti to připravím.

Hodil jsem to jsem: https://pastebin.com/5EGzvTnx

takhle mi to funguje (filtruje) ale nerozděluje, a nevypisuje vždy jen potřebný počet.

---------- Příspěvek doplněn 06.07.2022 v 21:00 ----------

Podařilo se ti?

Edit fiddle - JSFiddle - Code Playground

Původně odeslal Doctore97 ↪

Edit fiddle - JSFiddle - Code Playground

Velká paráda!

Moc moc moc děkuju :)