jQuery: Dom Traversal (find parent and child nodes) - Beau teaches JavaScript

jQuery makes it easy to find specific elements based on their relation to other elements. Many methods allow you to find parent and child elements.

The following methods are discussed in this video: parent, parents, parentUntil, children, find, siblings, next, nextAll, nextUntil, prev, prevAll, prevUntil.

-

[mkmohsinali]

Great explanation. Visual representation really helped.

[roblane]

Great video. Just what I needed. Thanks

[kalimahamad]

I have div which have two tables in that table have a column total and i want to add all total and show grand total how to run the loop. showing snapshot
<div class="col-md-12" style="border:#144677 solid 2px; id="17divProductBox">
<!-- FIRST TABLE START -->
<table class="table table-bordered table-sm" id="3innerTable1" style="background-color: #b1f2b3;">
<tbody>
<tr>
<th>
<input type="checkbox" title="17, 3" class="checkBoxDelete" id="17checkBoxDelete" checked="">
VOUCHER
</th>
<th>CODE</th>
<th>PENDING</th>
<th>VOUCHER BALANCE QTY</th>
<th>FACE VALUE</th>
<th>DISCOUNT(%)</th>
<th>QUANTITY</th>
<th>TOTAL</th>
</tr>
<tr>
<td>AHimanshu INR 100</td>
<td>VAH100</td>
<td class="tdPending" title="136, 3" label="17" id="17tdPending">
0 </td>
<td>447</td>
<td id="17tdfvalue">100 <input type="hidden" name="ord[17][face_value]" id="17face_value" value="100"><input type="hidden" class="form-control" id="3hdnProductId" value="9"> </td>
<td id="17tdDisc">
<input type="number" name="ord[17][discount]" class="form-control txtDisc" required="required" placeholder="Three Character" maxlength="3" id="17txtDiscount" onkeyup="myDiscount(this.value, 17)" step="any" readonly="readonly" value="10.00"> </td>
<td id="17tdQty" class="prdRowQty" title="3, 17">
<input type="number" name="ord[17][qty]" class="form-control" required="required" placeholder="Four Character" maxlength="4" id="17qty" onkeyup="myQuantity(this.value, 17)" value="-447"> </td>
<td id="17tdTotal" class="rowTotal">-40230</td>
</tr>
</tbody>
</table>
<!-- FIRST TABLE END -->

<!-- SECOND TABLE START -->
<table class="table table-bordered table-sm" id="17innerTable" style="background-color: #b1b2b3;">
<tbody><tr id="17innerTR">
<th>DAYS</th>
<th>TOTAL</th>
<th>MAX</th>
<th>AVERAGE</th>
<th>TAT-(DAYS)</th>
<th>QUANTITY</th>
</tr>

<tr>
<td>30</td>
<td id="17total_30">0</td>
<td id="17max_30">0</td>
<td id="17avg_30">0</td>
<td id="17tat_30">0.00</td>
<td id="17qty_30">0</td>
</tr>

<tr>
<td>60</td>
<td id="17total_60">0</td>
<td id="17max_60">0</td>
<td id="17avg_60">0</td>
<td id="17tat_60">0.00</td>
<td id="17qty_60">0</td>
</tr>

<tr>
<td>90</td>
<td id="17total_90">0 </td>
<td id="17max_90">0</td>
<td id="17avg_90">0</td>
<td id="17tat_90">0.00</td>
<td id="17qty_90">0</td>
</tr>

<tr>
<td>1</td>
<td id="17total_1">0</td>
<td id="17max_1">0</td>
<td id="17avg_1">0</td>
<td id="17tat_1">0.00</td>
<td id="17qty_1">0</td>
</tr>
</tbody>
</table>
</div>
Tell me how to loop this child element contained inside div

[christopherhoup]

Can I access a .prev() containing a class or id? If so can you provide an example?

[saswatdai]

please verify your freecodecam email..the site has gone down :(

[ADITYA_CSE]

when we use console.log () in javascript

[AndrewRMillar]

You do realize that you are not allowed to place block level elements inside inline elements, right? I realize that that is not important for the subject of this tut/showcase, or however you want to call this. But if coders, inexperienced with html, are using this as a reference, getting things like that right is important.
Don't mean to bash your vids, they are very informative for people beginning with jQuery!