Traversing the DOM with jQuery
Many-a-times, we use jQuery because we want to use it to tell the browser to target certain elements and perform certain things. For us to do that, we have to get nifty at targeting (or many would say "traversing") through the DOM to select the items/elements that you really want to work with.
Here are some jQuery methods we can use to traverse through the DOM:
.children() (will select the immediate children of a parent). Similarly, in CSS we would target the children of a parent by typing:
ul.exampleClass > li { insert styling }
.find() (will find all the children despite who their parents are. I call this the "children abduction" method - it will take alllll the kiddies)
.first() (will target the first immediate child - cause it's always the first child's fault)
.eq() (will select from a list of items based on their index position)
What's Index Position, Ellen? Well, I'm glad you asked...
hello, jQuery is cool
[ 0 ] [ 1 ] [ 2 ] [ 3 ]
This is how indexing works. The list of items will start at zero instead of one. So if I want to choose the item "is" from that sentence, I could use the method .eq() and give it an index of 2. Like this: .eq(2) Yar?
.next() (will select the next item that you've currently targeted)
.prev() (will select the previous item that you've currently targeted)
.parent() (will get the parent of the item)
.parents() (will gather all the parents with the same elements [e.g. same class name] starting from the given selector [from the selector that you've called .parents from e.g $('li').parents('.className')], while traveling up the entire DOM tree returning all matched parent elements -- it's like a parent-teacher night.)
.closest() (will gather the first item that has the same element starting from the given selector and only returning the 'closest' one found. -- Closest ain't greedy, it just wants a one-on-one with ONE parent. Not the whole crowd).
These are just some of the more common jQuery DOM traversing methods, for a more inclusive list, visit the jQuery documentation here: http://api.jquery.com/category/traversing/
stormborns
2087
germansingergirl
vaporwave
turnnoffyourmind
janainaart