CODEWITHSUNDEEP
jquery
MacMan
MacMan

Reputation: 933

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

Upvotes: 0

Views: 904

Answers (1)

eisbehr
eisbehr

Reputation: 12452

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>

Upvotes: 2

Related Questions