jQuery Tutorial #4 - DOM Traversal with jQuery

Key Takeaways

okay so one of the things you're going to see on job descriptions all over the place or on uh job postings is Dom traversal um you're going to see things like able to Traverse the Dom with ease able to bend the Dom to your will um skilled at Dom interaction and what that means is uh you kind of know your way around the document object model which is what the Dom stands for and what the document object model is is when your browser reads your HTML file um it actually turns each one of these elements you've made into an element in the in the browser that JavaScript can talk to that CSS Styles can be applied to um and so kind of when the browser reads all three Technologies it creates the Dom and then it can render it for the viewer to see and so when you interact with JavaScript you're not actually interacting with your HTML code you're interacting with what the browser built from your HTML code you're interacting with the Dom so uh when you see things like that in job descriptions they're looking for can you easily uh find specific and sometimes complicated things out of the Dom and work with them and that's where jQuery really shines uh it is actually primarily a Dom traversal Library it's made to do things that would normally be very complex with JavaScript alone uh it's make it makes them very easy so let's get into Dom traversal with jQuery um I'm actually going to start over here with uh the console because it makes it a little easier we know that you can can go Li and find all the LI elements there you go that found all my li elements on the page uh a cool thing you can do is you can go first and that's going to find your first one on the page and then you can go last and that's going to find the last one on the page which is not actually the last one in my list it's the last one on the entire page uh which is this Li which is inside of another Li um so let's say I can actually go first and I can hide it there you go the first one's hidden I can show it again I can go EQ which will actually get me an index so if I go eq0 that's going to get me the first index which is actually the same as first um but I can actually go eq1 which will give me the second one so the eqs would go 0 1 2 three which is the LI right here three then four five six so I have seven seven Lis on the page eq0 through six so that would kind of be how access those um let's look at children so let's say I wanted to get UL first here's another way you can do it if you want to do it in the selector same thing children will get me all the Lis that are direct children of my element so if I look back over here at my HTML code I have a child Li child Li child Li these Lis down here will not show up in that list because it's only getting my first children so that's kind of a way to help narrow that selection down if I only wanted to hide the children of list that would be how I do that um another one is siblings so if I want to go Li first siblings then that's going to give me all the siblings of this guy but this guy will not be in the list because it's just my siblings so that's those three elements there um so let's actually let's see there's another one then that would be parent Li first. par um and that's going to give me the UL that is my parent and you can actually keep chaining that up so let me go Li eq4 which will be this guy eq4 that's him right there and then eq4 parents is going to give me the sublist which is ul and if I go parent parent then that's going to give me the LI that that's a part and you can just keep going up the chain and that's going to give me the list another thing I can do is go parent parent pre so now I'm going this Li and I'm going parent which is the whole UL I'm going parent again which is this Li and I go preve that's going to go the previous sibling now so that should give me this three right here and there you go yep you have it so now if I go pr. preve now I'm going up to two so I'm going all the way up the chain I'm going to the previous to the previous and now if I go pr. pr. next which makes absolutely no sense why would I go back only to go forward I'm back up to three probably an easier way to do this would go Li first. next which is going to give me the same as eq1 so that's kind of how you start moving around things let me show you a couple use cases of how you could do stuff like this I'm going to go Li on click and I'm going to go this next. hiide so whenever I click I'm just going to hide the next li um so I'm going to click on you and number two's gone and now I'm going to click on you and number four is gone if I click on you nothing happens because number two still exists it's just hidden so if I would actually go next. remove I could actually keep doing this over and over again there you go uh so that's kind of how that works uh another thing that I could do is I could hide all the siblings I'll just remove them why not why make them go away when you can make them gone forever so now whichever one you click on is the one that's going to say you notice this one's blue it's because it has a class of special um I made this simple rule that anything with special gets blue uh so what I could actually do is I could make all my siblings have a class of special whenever you click on something whenever you click on something which so now I didn't become special but all my siblings became special um and what I could actually do is make sure that my class special gets removed if I do have it so that way there you go now whatever I click on all my siblings will get the special class but I won't have the special class um what's another thing you could do I could actually go parent and add the special class to my parent so now when I click on this the parent gets a special class so everybody within it gets it so that's kind of another thing that you can do um I can also go closest I don't think I did closest yet and then closest you have to give it something so I'm going to go. list so it's going to go up the chain till it find something with a class of lists so basically no matter what Li I click on it's going to go all the way up the chain are you a list are you a list oh you're a list and so then I'm going to add the class to that so now I can click here and it goes all the way up add special to the entire thing um let's see I'll give you a couple more examples before I leave you guys for now um you could do filter um so let's say whenever I click on list I'm going to go. list I'm going to go filter uh filters actually yeah so I'll go find I'm going to go find all the liis within my element so whenever I click anywhere on this list um I'm going to find all the UI all the liis within list um and I'm going to remove um I'll do add the class special same thing as I've been doing so this should do just what we've been doing there we go uh but let's say I only actually want to add the class to the first li of each one I can do that guy so only the first elements are going to get it now uh the first element um I could also go filter special and I'll actually do a remove here hope I'm not going too fast for you at this point so whenever I click on anything inside of list this is going to be list because that's what my selector was here I'm going to find any Li in it filtered by special so I'm going to sight I'm going to find all the Lis I'm going to filter them down to where only special exists and I'm going to remove special so now I'm clicking and special's gone of course an easier way to do this would just go find special but then I couldn't teach you about the filter method now could I there you go exact same thing so find is awesome another great thing about find is it's really really fast because it's only looking in this element it's not having to look at my whole page I could get around this by doing this exact same thing here whenever I click remove special right that's easy exact same thing but now it had to search my entire page to find one item with a class of special that's not very efficient JavaScript so I'm going to stay within the element that we're working with I'm going to find special inside of it and then I'm going to remove it um another thing that I can do is I can uh do an action only if um let me do another thing so any I click on I can do an if and alert special so if it's a special one that I clicked on I want to alert special so of course we can do this I mean that's easy you know anytime you click on special alert special of course should do that oh this if is so now whenever I click on special it alerts special awesome okay um uh let's say I want to do other stuff to every other Li say in here other stuff happens um oh like let's say I want to hide it um and if I'm hiding a special one I also want to alert special so I can go if this is special if this is special alert special so now whenever I click on Nei it's going to hide it and that's going to hide it and say haha special so another thing I can do if this is not special alert not special not special and not special so that's kind of how you can do those things um while I'm on this I'm hiding every Li that gets clicked on and look at this when I click on one of these subis over here it hides the entire menu That's because when I click I'm clicking on you and I'm clicking on you because I'm inside of you at the same time so there's a listener for both of these liis um couple ways you could get around this I could just Target sublist um I can only hide ones when I click on the subl list um um sorry sublist UL or Li so now I'm only going to I'm only listening to Lis on the sublist these aren't doing anything okay that's one way around it but say I still wanted to do a bunch of other stuff to all liis so I want to do other stuff to all liis and I only want to hide the LI if it's on the subl list so I could go if this do parent is sublist so if the parent is a sublist then I'm going to hide it uh and if it's not I'm not going to do anything else so now I'm doing other stuff like here let me say I want a console log so now whenever I click on any Li it's going to log down here that I did fix this there we go when I click on any l it's going to say clicked on Li as you notice down there that number keeps going up and when I click on you it's going to also log and it's going to hide so that's kind of how we can do some smarter things like that uh I think that just about covers it I tried to go fast for those of you guys that are a little more comfortable you can get it and be done and some of you guys may want to rewatch this video um but that's about it I hope you enjoyed learning about Dom traversal with jQuery