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

[stbuchok]

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();