jQuery and AJAX Tutorials 34 | Coding AJAX Filters Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

guys my name is Ilias and this is your
34th I guess I hope tutorial jQuery so
in this tutorial we're going to continue
working on our filter and we already
wrote this code and we prepared the HTML
structure for it and I hope you guys
already have this HTML code on your in
your document as well so all right now
what we actually have we store into this
variable category the current category
which is clicked and our next step is to
hide the entire element the entire
images first and after we hit it we want
the elements the elements with the
category which is clicked to appear
again so we know that images which we
have are stored in this unordered list
with the idea of portfolio so we can
just go ahead and hide all this list
elements inside of it so it was just
write a simple selector type portfolio
space Alai so we refer to all this these
list elements in this portfolio and then
you can just go ahead and say fade out
so and let's see what this code does
before we continue I click at any
category and all them disappear and so
simultaneously
I want the elements with the category
which is click to appear again and this
is going to go too tricky but if you're
familiar with loops from other
programming languages you will be able
to to make it work to understand it and
if you don't you can just watch the
tutorial over and over again since you
until you understand that so we are
going to use a very powerful function
called each so this function each should
be applied to a group of elements and in
our case to these elements and then just
type each and this function takes this
parameter
is function we should be executed and
every time we loop through one element
so and if you want to access the current
element you just uses this keyword this
standard jQuery keyboard for the current
element and in order to test
let's output all the elements HTML so
I'll create a new variable I'll just
call it test set equal to this dot HTML
and we ran this code I expect all the
list elements HTML code to appear in the
console but before I create a console
log output and output test every time
all right great and let's just go ahead
and run this it's just gonna happen so I
just click at any element right here and
I see that jQuery displays me every
elements HTML so from from the 1st to
the 8th and so what it does it runs this
code eight times and if you don't
believe me and create a variable I just
call it I is that equal to zero and
every time this code runs you would want
to add one to it and you would also want
to display this current I variables
value and this this I variable will be
bigger every time so let's just go ahead
and run it and you see that in fact this
this is a loop and it ran eight times so
this is boot so far and why we did all
that because we want to check every
element it has a class of of the current
keyword for example if I click
architecture I want to look if this if
this element
as a class of architecture so let's just
go ahead and and make a if condition and
ask if the current class which is
flipped well this category if the
category equals to the hold on actually
there's a better work around how to do
that we can ask if this has class of
category and this has class function of
jQuery it what it does it checks if this
element this current element has this
class category so if it does is around
this code if not if it won't do anything
and it has two values in return which is
true or false and if it's true this code
will run so if it has class category we
want this element to appear back
so I'll just say fade in now let's just
go ahead and test it all right I expect
now all the elements with the class of
nature to stay on the screen so I click
nature and they do stay on the screen
because I set this elements to be to
have a class of nature so this is how it
works and well of course it's not it's
not done because we can only switch
between the categories now you can
switch between cities natures and
architectures but we also want to have
like all category and when we click on
it we want the whole portfolio to be to
be back again and we also want to add
some feedback to the user so the user
knows which category is currently active
and this is something what we are going
to do in the next tutorial so this
algorithm is kind of tricky but I mean
on the other hand is very understandable
because jQuery provides these powerful
tools and if you would write this code
in normal JavaScript you would have not
only how many lines of code do we have
well not a lot we'll have like probably
ten times more lines of code for all
those animations for the sloops
and for all these current elements and
stuff so jQuery is a very very powerful
tool for solving such problems and I
hope you guys you'll like this tutorial
and I'll see you guys the next one