From 8263c12fcd65a7d9c67534e281aa9b9149e11d96 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sat, 9 Jul 2011 23:36:57 -0400 Subject: [PATCH 1/4] new traversing docs --- content/jquery-basics/traversing.md | 72 +++++++++++++++++++++-------- 1 file changed, 52 insertions(+), 20 deletions(-) diff --git a/content/jquery-basics/traversing.md b/content/jquery-basics/traversing.md index 3c5780cd..4c55b8cb 100644 --- a/content/jquery-basics/traversing.md +++ b/content/jquery-basics/traversing.md @@ -5,36 +5,68 @@ title : "Traversing" --- ## Traversing -Once you have a jQuery selection, you can find other elements using your selection as a starting point. +Once you have made an intial selection with jQuery, you may want to traverse a little deeper into what you just selected. Traversing can be broken down into three basic parts: parents, children and sibilings. jQuery has an abundance of easy to use methods for all these parts. You will notice that each of these methods can optionaly be passed another selector or selection in order to refine your selection even more. -For complete documentation of jQuery traversal methods, visit [http://api.jquery.com/category/traversing/](http://api.jquery.com/category/traversing/ "Traversing documentation on api.jquery.com"). -
-### Note +### Parents -Be cautious with traversing long distances in your documents — complex traversal makes it imperative that your document's structure remain the same, something that's difficult to guarantee even if you're the one creating the whole application from server to client. One- or two-step traversal is fine, but you generally want to avoid traversals that take you from one container to another. +There are four methods for finding the parents from a selection: `$.fn.parent`, `$.fn.parents`, `$.fn.parentsUntil` and `$.fn.closest`. + +
+Selecting an element's direct parent + + $('#myList').parent();
+
+Selecting all the parents of an element which match a given selector + $('#myList').parents('div'); +
-Moving around the DOM using traversal methods +Selecting all the parents of an element up to, but *not including* the selector - $('h1').next('p'); - $('div:visible').parent(); - $('input[name=first_name]').closest('form'); - $('#myList').children(); - $('li.selected').siblings(); + $('#myList').parentsUntil('div');
-You can also iterate over a selection using `$.fn.each`. This method iterates over all of the elements in a selection, and runs a function for each one. The function receives the index of the current element and the DOM element itself as arguments. Inside the function, the DOM element is also available as `this` by default. +### Children +There are only 2 methods for finding children elements from a selection: `$.fn.children` and `$.fn.find`. The difference between these methods lies in how far into the child structure the selection is made. `$.fn.children` only operates on direct child nodes, while `$.fn.find` can traverse recursively into children, and children of those children, etc. + +
+Selecting an element's direct children + + $('#myList').children(); +
-Iterating over a selection +Finding all the links within a selection that match the selector + + $('#myList').find('a.external'); +
+ +### Sibilings + +The rest of the traversal methods within jQuery all deal with finding sibiling selections. There are a few basic methods as far as direction is concerned. You can find previous elements with `$.fn.prev`, next elements with `$.fn.next` and both with `$.fn.sibilings`. There are also a few other methods that build onto these methods, similar to how `$.fn.parentsUntil` works; `$.fn.nextAll`, `$.fn.nextUntil`, `$.fn.prevAll` and `$.fn.prevUntil`. - $('#myList li').each(function(idx, el) { - console.log( - 'Element ' + idx + - 'has the following html: ' + - $(el).html() - ); - }); +
+Selecting an element's next sibiling that matches the given selector + + $('#myList').next('div.section'); +
+
+Selecting an element's previous sibiling that matches the given selector + + $('#myList').prev('div.section'); +
+
+Selecting an element's sibilings in both directions that matches the given selector + + $('#myList').sibilings('div.section'); +
+ +You can see all these methods metioned and more at the docs [http://api.jquery.com/category/traversing/tree-traversal/](http://api.jquery.com/category/traversing/tree-traversal/ "Traversal documentation on api.jquery.com") + +
+### Note + +Be cautious with traversing long distances in your documents — complex traversal makes it imperative that your document's structure remain the same, something that's difficult to guarantee even if you're the one creating the whole application from server to client. One- or two-step traversal is fine, but you generally want to avoid traversals that take you from one container to another.
\ No newline at end of file From 0ef74d7c60248ad3c717afa6e15324a30ec83c81 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sun, 10 Jul 2011 01:56:29 -0400 Subject: [PATCH 2/4] add closest, and cleaned up some wording --- content/jquery-basics/traversing.md | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/content/jquery-basics/traversing.md b/content/jquery-basics/traversing.md index 4c55b8cb..80cf223b 100644 --- a/content/jquery-basics/traversing.md +++ b/content/jquery-basics/traversing.md @@ -5,7 +5,7 @@ title : "Traversing" --- ## Traversing -Once you have made an intial selection with jQuery, you may want to traverse a little deeper into what you just selected. Traversing can be broken down into three basic parts: parents, children and sibilings. jQuery has an abundance of easy to use methods for all these parts. You will notice that each of these methods can optionaly be passed another selector or selection in order to refine your selection even more. +Once you have made an intial selection with jQuery, you may want to traverse a little deeper into what you just selected. Traversing can be broken down into three basic parts: parents, children and sibilings. jQuery has an abundance of easy to use methods for all these parts. You will notice that each of these methods can optionaly be passed string selector and some can also take another jQuery object in order to filter your selection down. Be sure to pay attention and refer to the API docs to know what all variation of arguments you have available. ### Parents @@ -18,24 +18,29 @@ Selecting an element's direct parent $('#myList').parent();
-Selecting all the parents of an element which match a given selector +Selecting all the parents of an element that match a given selector - $('#myList').parents('div'); + $('#myList').parents('div.section');
Selecting all the parents of an element up to, but *not including* the selector - $('#myList').parentsUntil('div'); + var section = $('div.section'); + $('#myList').parentsUntil(section);
+
+Selecting the closest parent, note that only one parent will be selected. + $('#myList').closest('#navigation'); +
### Children -There are only 2 methods for finding children elements from a selection: `$.fn.children` and `$.fn.find`. The difference between these methods lies in how far into the child structure the selection is made. `$.fn.children` only operates on direct child nodes, while `$.fn.find` can traverse recursively into children, and children of those children, etc. +There are only 2 methods for finding child elements from a selection: `$.fn.children` and `$.fn.find`. The difference between these methods lies in how far into the child structure the selection is made. `$.fn.children` only operates on direct child nodes, while `$.fn.find` can traverse recursively into children, and children of those children, etc.
Selecting an element's direct children - $('#myList').children(); + $('#myList').children('li');
Finding all the links within a selection that match the selector From 7497a47afa312ff7c5becddee68392718efbf09c Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sun, 17 Jul 2011 21:48:06 -0400 Subject: [PATCH 3/4] code needs to use 4 spaces --- content/jquery-basics/traversing.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/jquery-basics/traversing.md b/content/jquery-basics/traversing.md index 80cf223b..b88e2ea1 100644 --- a/content/jquery-basics/traversing.md +++ b/content/jquery-basics/traversing.md @@ -15,23 +15,23 @@ There are four methods for finding the parents from a selection: `$.fn.parent`,
Selecting an element's direct parent - $('#myList').parent(); + $('#myList').parent();
Selecting all the parents of an element that match a given selector - $('#myList').parents('div.section'); + $('#myList').parents('div.section');
Selecting all the parents of an element up to, but *not including* the selector - var section = $('div.section'); - $('#myList').parentsUntil(section); + var section = $('div.section'); + $('#myList').parentsUntil(section);
Selecting the closest parent, note that only one parent will be selected. - $('#myList').closest('#navigation'); + $('#myList').closest('#navigation');
### Children @@ -40,12 +40,12 @@ There are only 2 methods for finding child elements from a selection: `$.fn.chil
Selecting an element's direct children - $('#myList').children('li'); + $('#myList').children('li');
Finding all the links within a selection that match the selector - $('#myList').find('a.external'); + $('#myList').find('a.external');
### Sibilings @@ -55,17 +55,17 @@ The rest of the traversal methods within jQuery all deal with finding sibiling s
Selecting an element's next sibiling that matches the given selector - $('#myList').next('div.section'); + $('#myList').next('div.section');
Selecting an element's previous sibiling that matches the given selector - $('#myList').prev('div.section'); + $('#myList').prev('div.section');
Selecting an element's sibilings in both directions that matches the given selector - $('#myList').sibilings('div.section'); + $('#myList').sibilings('div.section');
You can see all these methods metioned and more at the docs [http://api.jquery.com/category/traversing/tree-traversal/](http://api.jquery.com/category/traversing/tree-traversal/ "Traversal documentation on api.jquery.com") From 45a2aef18067e50510f960bf2523dc4acf331488 Mon Sep 17 00:00:00 2001 From: Garrett Johnson Date: Sun, 17 Jul 2011 21:56:36 -0400 Subject: [PATCH 4/4] cleaning up my words --- content/jquery-basics/traversing.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/jquery-basics/traversing.md b/content/jquery-basics/traversing.md index b88e2ea1..fd52193c 100644 --- a/content/jquery-basics/traversing.md +++ b/content/jquery-basics/traversing.md @@ -5,12 +5,12 @@ title : "Traversing" --- ## Traversing -Once you have made an intial selection with jQuery, you may want to traverse a little deeper into what you just selected. Traversing can be broken down into three basic parts: parents, children and sibilings. jQuery has an abundance of easy to use methods for all these parts. You will notice that each of these methods can optionaly be passed string selector and some can also take another jQuery object in order to filter your selection down. Be sure to pay attention and refer to the API docs to know what all variation of arguments you have available. +Once you have made an intial selection with jQuery, you may want to traverse deeper into what was just selected. Traversing can be broken down into three basic parts: parents, children and sibilings. jQuery has an abundance of easy to use methods for all these parts. You will notice that each of these methods can optionaly be passed string selector and some can also take another jQuery object in order to filter your selection down. Be sure to pay attention and refer to the API docs to know what all variation of arguments you have available. ### Parents -There are four methods for finding the parents from a selection: `$.fn.parent`, `$.fn.parents`, `$.fn.parentsUntil` and `$.fn.closest`. +The methods for finding the parents from a selection: `$.fn.parent`, `$.fn.parents`, `$.fn.parentsUntil` and `$.fn.closest`.
Selecting an element's direct parent @@ -35,7 +35,7 @@ Selecting the closest parent, note that only one parent will be selected.
### Children -There are only 2 methods for finding child elements from a selection: `$.fn.children` and `$.fn.find`. The difference between these methods lies in how far into the child structure the selection is made. `$.fn.children` only operates on direct child nodes, while `$.fn.find` can traverse recursively into children, and children of those children, etc. +The methods for finding child elements from a selection: `$.fn.children` and `$.fn.find`. The difference between these methods lies in how far into the child structure the selection is made. `$.fn.children` only operates on direct child nodes, while `$.fn.find` can traverse recursively into children, and children of those children, etc.
Selecting an element's direct children @@ -50,7 +50,7 @@ Finding all the links within a selection that match the selector ### Sibilings -The rest of the traversal methods within jQuery all deal with finding sibiling selections. There are a few basic methods as far as direction is concerned. You can find previous elements with `$.fn.prev`, next elements with `$.fn.next` and both with `$.fn.sibilings`. There are also a few other methods that build onto these methods, similar to how `$.fn.parentsUntil` works; `$.fn.nextAll`, `$.fn.nextUntil`, `$.fn.prevAll` and `$.fn.prevUntil`. +The rest of the traversal methods within jQuery all deal with finding sibiling selections. There are a few basic methods as far as direction is concerned. You can find previous elements with `$.fn.prev`, next elements with `$.fn.next` and both with `$.fn.sibilings`. There are also a few other methods that build onto these basic methods, similar to how `$.fn.parentsUntil` works; `$.fn.nextAll`, `$.fn.nextUntil`, `$.fn.prevAll` and `$.fn.prevUntil`.
Selecting an element's next sibiling that matches the given selector