Using selectors to find children <th>
My goal is to find those tags with a class of .ht_nestingParent and then add a blank table row above the .ht_nestingParent and then a blank row under the last of it's children rows; which are the rows below that lack the .ht_nestingParent class.
Here is my HTML
- <tbody>
- <tr>
- <th class="ht_nestingLevels ht_nestingParent"><div class="relative"><span class="rowHeader">1</span>
- <div class="ht_nestingButton ht_nestingCollapse"></div>
- </div></th>
- <td class="">7-ELEVEN</td>
- <td class="">22971161</td>
- <td class=""></td>
- <td class=""></td>
- <td class=""></td>
- <td class=""></td>
- <td class=""></td>
- </tr>
- <tr>
- <th class="ht_nestingLevels ht__highlight"><div class="relative"><span class="ht_nestingLevel_empty"></span><span class="rowHeader">2</span></div></th>
- <td class="current highlight"></td>
- <td class=""></td>
- <td class="">A</td>
- <td class="">SOUTH MOD 67 ID FACE||7-11 OKLAHOMA COLORS||95-5/8 X 96-3/4||DWG: SO1067RF.OK (102138)||</td>
- <td class="">4</td>
- <td class="">2020-02-20</td>
- <td class="">2020-01-24</td>
- </tr>
- <tr>
- <th class="ht_nestingLevels ht_nestingParent"><div class="relative"><span class="rowHeader">3</span>
- <div class="ht_nestingButton ht_nestingCollapse"></div>
- </div></th>
- <td class="">7-ELEVEN</td>
- <td class="">22983321</td>
- <td class=""></td>
- <td class=""></td>
- <td class=""></td>
- <td class=""></td>
- <td class=""></td>
- </tr>
- </tbody>
I'm so new to complex jQuery..or what seems complex to me. Here's a function I was trying to write using the .each method.
- $(document).ready(function() {
- $('.htCore tbody tr th.ht_nestingParent').each(function (i) {
- $val = $(this).html();
- alert($val);
- });
- });
I don't think my function is right...it's not doing anything. But, isn't there a way to use selectors more thoroughly than I currently am to find the <th> with .ht_nestingParent and the subsequent children below it until it finds the next <th> with .ht_nestingParent?