MacMan MacMan - 2 months ago 9
jQuery Question

Jquery - get nearest TR ID by Class?

I'm using a jquery to move table rows and when I release the row I'd like to get the ID for the nearest TR which has the class

group_heading


When the row I'm moving is released I get it's ID using:

var row_id = $(row).prop('id');
console.log (row_id)


which results in
sprint_145975


How do I get the ID of the TR nearest to
sprint_145975
with the class
group_heading
?

This is the table layout.

<tr id="present_sprints" class="group_heading nodrag">
<td colspan="4">LIST1</td>
</tr>
<tr id="sprint_145664" style="cursor: move;">
<td>First round - in sprint</td>
<td>2012-09-19</td>
<td>2012-09-27</td>
</tr>
<tr id="sprint_145975" class="toggler_row" style="cursor: move;">
<td>Third round</td>
<td>2012-10-04</td>
<td>2012-10-11</td>
</tr>
<tr id="sprint_145966" class="toggler_row" style="cursor: move;">
<td>Release prep</td>
<td>2012-10-20</td>
<td>2012-10-27</td>
</tr><tr id="sprint_145665" class="toggler_row" style="cursor: move;">
<td>Second round</td>
<td>2012-09-28</td>
<td>2012-10-04</td>
</tr>

<tr id="future_sprints" class="group_heading nodrag">
<td colspan="4">Future Sprints</td>
</tr>
<tr id="sprint_145964" class="toggler_row" style="cursor: move;">
<td>Fifth run</td>
<td>2012-10-27</td>
<td>2012-11-03</td>
</tr>
<tr id="sprint_145965" class="toggler_row" style="cursor: move;">
<td>Fourth round</td>
<td><input type="text" value="2012-10-13" <="" td="">
</td><td>2012-10-20</td>
</tr>


For the example above I'd be looking to get ID = 'present_sprints'

If the the ID of the moved row was sprint_145965, I'd expect the ID for the nearest TR with class group_heading to be future_sprints

How do I do this ?

I've tried:

$('#sprint_145975').closest('.group_heading).prop('id);
$('#sprint_145975').closest('tr.group_heading).prop('id);


But that didn't work..

Thanks

Answer

You are looking for .prevAll() instead of .closest(). You can use .eq() to get only the first one. And you should use .attr() instead of .prop().

var heading = $('#sprint_145975').prevAll('.group_heading').eq(0);
console.log( heading.attr('id') );

heading = $('#sprint_145964').prevAll('.group_heading').eq(0);
console.log( heading.attr('id') );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr id="present_sprints" class="group_heading"></tr>
  <tr id="sprint_145975"></tr>
  <tr id="future_sprints" class="group_heading"></tr>
  <tr id="sprint_145964"></tr>
</table>