JQuery get parent tr from child tr

[someone5]

How can I find the parent tr from the closest child tr e.g. from the second child tr, how can I get to the first parent tr?

Below is the html table:

        <table>
        <tr class="menu">
            <td><input type='text' class='parent' value='First Parent'></td>  
    </tr>
            <tr class="submenu">
                <td><input type='text' class='child' value='First Child'>
                </td>
          </tr>

             <tr class="submenu">
                <td><input type='text' class='child' value='Second Child'>
                </td>
            </tr>   
        <tr  class="menu">

            <td><input type='text' class='parent' value='Second Parent'></td>  </tr>
            <tr class="submenu">
                <td><input type='text' class='child' value='First Child'>
                </td>
                </tr>

    </table>

I have tried the following JQuery code:

$(this).closest('tr.submenu').closest('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').parent('tr.menu').find('.parent').val();

$(this).closest('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').prevUntil('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').parentsUntil('tr.menu').find('.parent').val();

$(this).closest('tr.submenu').parents(':first-child').find('.parent').val();

All attempts have failed. How can I get the parent value from the closest sub menu tr?

Thank you

Your structure is wrong for what you want in my opinion.
If you absolutely need to keep that structure then I'd suggest the following:

<table>
    <tr id="menu1" class="menu">
        <td>
            <input type='text' class='parent' value='First Parent'>
        </td>  
    </tr>
    <tr class="submenu">
        <td>
            <input type='text' class='child' data-parentId="menu1" value='First Child'>
        </td>
    </tr>
    <tr class="submenu">
        <td>
            <input type='text' class='child' data-parentId="menu1" value='Second Child'>
        </td>
    </tr>   
    <tr id="menu2" class="menu">
        <td>
            <input type='text' class='parent' value='Second Parent'>
        </td>
    </tr>
    <tr class="submenu">
        <td>
            <input type='text' class='child' data-parentId="menu2" value='First Child'>
        </td>
    </tr>
</table>

Then your javascript would look something like this for each of the cells:

$('#' + $(this).attr('data-parentId') + ' .parent')

This is of course assuming that I understand what you wanted in the first place.

[gon1387]

Hi someone5,

If you keep this pattern tr/td/input this will be ok. The snippet supposed you start at input. I also have a JSFiddle made, here's the link: JSFiddle Example

//Colors the input.child's closet TR.menu
$("input.child").parent().parent().each(function(){
    var $this = $(this),
        $target = $this.prev();

    //looks for previous sibling with menu class
    while(!$target.hasClass('menu')){
        $target = $target.prev();
    }

    //colors the input descendant of the tr.menu
    $target.children("td").children("input").css("background-color","yellow");
});

[hari_19]

try this ?

$(this).closest('tr').find('td:eq(0)').text();