Traverse

This section discusses methods that will enable you to walk the DOM, from selecting the parent to selecting the nodes that are next to the current element.

Gets the elements in the previous chain.

<div>a</div>
<span>b</span>

Karma('div'); // div
Karma('div').add('span'); // div, span
Karma('div').add('span').end(); // div

Selects all the children of the elements that match the selector (only if selector exists)

<ul>
 <li>a</li>
 <li>b</li>
 <li>c</li>
</ul>

alert(Karma('ul').children().get()); // [ <li>a</li>, <li>b</li>, <li>c</li> ]

Selects all the decendents of the elements that match the selector.

<div id="demo">
  <ul>
   <li>a</li>
   <li>b</li>
   <li>c</li>
  </ul>
</div>

alert(Karma('#div').decendents('li').get()); // [ <li>a</li>, <li>b</li>, <li>c</li> ]

Selects all the parent of the elements that match the selector (only if selector exists)

<div id="demo">
  <ul>
   <li>a</li>
   <li>b</li>
   <li>c</li>
  </ul>
</div>

alert(Karma('ul').parent().get()); // [ #demo ]

Selects all the ancestors of the elements that match the selector (only if selector exists)

<div id="demo">
  <ul>
   <li>a</li>
   <li>b</li>
   <li>c</li>
  </ul>
</div>

alert(Karma('li').ancestors('div').get()); // [ div#demo ]

Selects the sibling element that appears just before the current elements that match the selector (only if selector exists)

<div id="hi">a</div>
<div id="hi2">b</div>
<div id="hi3">c</div>

alert(Karma('#hi3').prev().get());        // [ <div id="hi2">b</div> ]
alert(Karma('#hi3').prev().prev().get()); // [ <div id="hi">a</div> ]

Selects the all the sibling elements that appear before the current elements that match the selector (only if selector exists)

<div id="hi">a</div>
<div id="hi2">b</div>
<div id="hi3">c</div>

alert(Karma('#hi3').prevAll().get()); // [ <div id="hi">a</div>, <div id="hi2">b</div> ]

Selects the sibling element that appears just after the current elements that match the selector (only if selector exists)

<div id="hi">a</div>
<div id="hi2">b</div>
<div id="hi3">c</div>

alert(Karma('#hi2').next().get()); // [ <div id="hi3">c</div> ]

Selects the all the sibling elements that appear after the current elements that match the selector (only if selector exists)

<div id="hi">a</div>
<div id="hi2">b</div>
<div id="hi3">c</div>

alert(Karma('#hi').nextAll().get()); // [ <div id="hi2">b</div>, <div id="hi3">c</div> ]

Selects siblings of the elements that match the selector (only if selector exists), current elements are not included

<div id="hi">a</div>
<div id="hi2">b</div>
<div id="hi3">c</div>

alert(Karma('#hi2').siblings().get()); // [ <div id="hi">a</div>, <div id="hi3">c</div> ]