Jquery : To find the closest tr class

Question

Below is my structure

-Clicking on flight_itinerary class should open flight_summary class html.

<table>
    <tr>
        <td>
            <table>
                <tr>
                    <td><a class="flight_itinerary">Flight Itinerary</a> </td> 
                </tr>   
            </table> 
        </td>
    </tr>
    <tr class="flight_summary" style="display:none;">
        <td>
            <table>
                <tr>
                    <td></td> 
                </tr>   
            </table> 
        </td>           
    </tr>
</table>

This is my script which i tried to open tr tag

    $(document).on('click', '.flight_itinerary', function(){
            $(this).closest("tr").find('.flight_summary').toggle();
});

Please have a look at http://stackoverflow.com/questions/6924333/jquery-select-first-row-of-table — Manish Gaikwad, Oct 15 '15 at 14:59
Slightly not answering your question but: Your two children `table` elements do not have a proper closing tag. Also: a `tr` element in HTML5 can only contain `tr` or `th` elements ([w3 documentation](http://www.w3.org/TR/html-markup/tr.html)) — Jeff Noel, Oct 15 '15 at 15:03

Barmar · Accepted Answer · 2015-10-15T15:10:50.903

.find() looks for a descendant matching the selector. When you go to the closest tr from .flight_itinerary, .flight_summary is not one if its descendants.

To get to .flight_summary from .flight_itinerary, you have to go up to the 2nd tr, then go to the next tr after that. You don't need to use .find there, because that tr is .flight_summary.

$(document).on('click', '.flight_itinerary', function() {
  $(this).parents("tr").eq(1).next().toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr><td>
    <table>
      <tr>
        <td><a class="flight_itinerary">Flight Itinerary</a> 
        </td>
        <tr>
    </table>
    </td></tr>
    <tr class="flight_summary" style="display:none;">
      <td><table>
        <tr>
          <td>Flight Summary</td>
          <tr>
      </table>

      </td></tr>
</table>

Lynch · Answer 2 · 2015-10-15T15:16:40.860

0

It's a bit of an awkward way of getting there, but the tables within tables doesn't help

$(document).on('click', '.flight_itinerary', function(){
    $(this).parent('tr').parent('table').parent('tr').parent('table').find('.flight_summary').toggle();
});

To make it a little cleaner, you could add a class to the main table (the big one housing all the rows and internal tables), and then do this;

// Assuming we added a class of 'main' to the outermost table

$(document).on('click', '.flight_itinerary', function(){
    $(this).parents('table.main').find('.flight_summary').toggle();
});

That would find the main table, then search for it's child row with the class of flight-summary

If you wanted the first matched instance of .flight_summary, then this would do that

$(document).on('click', '.flight_itinerary', function(){
    $(this).parents('table.main').find('.flight_summary').eq(0).toggle();
});

edited Oct 15 '15 at 15:16

answered Oct 15 '15 at 15:02

Lynch

900
4
11

-1 : it wouldn't find the closest `.flight_summary` of the clicked `.flight_itinerary` as requested by OP but every `.flight_summary` – pistou Oct 15 '15 at 15:08
OP said that clicking on it should open `flight_summary` class, never mentioned there only being one such element. In the code given above there is only one correct, but he doesn't say that there will only be one. – Lynch Oct 15 '15 at 15:13
I've added an edit to show how you would get the first matched `flight_summary` element just in case – Lynch Oct 15 '15 at 15:17
That what I understood from OP's code using `closest("tr")`.. I may be mistaken. Removed -1 – pistou Oct 15 '15 at 15:20
No worries, I can see how that would come across tbh, hence why I added the extra bit to my answer. Appreciate the removal of the -1 though, cheers – Lynch Oct 15 '15 at 15:21

Jquery : To find the closest tr class

2 Answers2