Filtering by Relationships

The position selectors are:

SelectorDescription
:first-childSelects all elements that are the fi rst child of their parent.
:last-childSelects all elements that are the last child of their parent.
:nth-child()Selects all elements that are the nth-child of their parent.
:only-childSelects all elements that are the only child of their parent.

nth-child filter starts at 1

The following code demonstrates the use of filter selectors that match according to specific relationships, for example :first-child or :only-child.

 
<!DOCTYPE html> 
<html>
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"> 
        </script>
        <script> 
            $(function(){ 
                document.writeln( $("div span:first-child") ) 
                document.writeln( $("div span:last-child") ) 
                document.writeln( $("div span:only-child") ) 
                document.writeln( $("div span:nth-child(2)") ) 
                document.writeln( $("div span:nth-child(2n+1)") ) 
                document.writeln( $("div span:nth-child(even)") ) 
            });
        </script> 
    </head> 
    <body>
        <div> 
            <span id="a">A</span> 
            <span id="b">B</span> 
            <span id="parrot">Parrot</span> 
            <span id="pigeon">Pigeon</span> 
            <span id="hawk">Hawk</span>
        </div>
        <div> 
            <span id="bear">bear</span> 
            <span id="rabbit">rabbit</span> 
            <span id="fox">fox</span> 
            <span id="monkey">monkey</span> 
            <span id="horse">horse</span>
        </div> 
        <div> 
            <span id="martian">martian</span> 
        </div> 
    </body> 
</html>
Click to view the demo
Home 
  JavaScript Book 
    jQuery  

Selector:
  1. jQuery Selector
  2. DOM Element Selection
  3. Filter Selectors
  4. Selecting by Position
  5. Filtering by Content
  6. Filtering by Relationships
  7. Escape characters
  8. ID attribute
  9. Tag Name
  10. Class Name
  11. Descendant
  12. Child (E > F)
  13. General sibling (E ~ F)
  14. Multiple expressions (E, F, G)
  15. Universal (*)
  16. Numbered child (:nth-child(n/even/odd/expr))
  17. First child (:first-child)
  18. Last child (:last-child)
  19. Only child (:only-child)
  20. Not (:not(E))
  21. Empty (:empty)
  22. Attribute selectors
  23. Attribute ([attr])
  24. Attribute equals ([foo=bar])
  25. Attribute does not equal ([foo!=bar])
  26. Attribute begins with ([foo^=bar])
  27. Attribute ends with ([foo$=bar])
  28. Attribute contains ([foo*=bar])
  29. Attribute contains word ([foo~=bar])
  30. Attribute contains prefix ([foo|=bar])
  31. Attribute exists $("[attributeName*='value']");
  32. Form selectors (:input)
  33. Form text fields (input:text)
  34. Form Password field (input:password)
  35. Form Radio button (input:radio)
  36. Form Checkbox (input:checkbox)
  37. Form Submit button (input:submit)
  38. Form Image button (input:image)
  39. Form Reset button (input:reset)
  40. Form button (input:button)
  41. Form File upload (input:file)
  42. Form Enabled form element (input:enabled)
  43. Form Disabled form element (input:disabled)
  44. Form Checked box (input:checked)
  45. Form Selected option (input:selected)
  46. Element at index (:eq(n))
  47. Greater than (:gt(n))
  48. Less than (:lt(n))
  49. First (:first)
  50. Last (:last)
  51. Even element (:even)
  52. Odd element (:odd)
  53. Is parent (:parent)
  54. Contains text (:contains(text))
  55. Contains element (:has(E))
  56. Visible (:visible)
  57. Hidden (:hidden)
  58. Header element (:header)
  59. Currently animating (:animated)
  60. $(this)
  61. Custom User Selectors