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

SheldonDuvall commented: www.youtube.com +0
Re: JQuery get parent tr from child tr 80 80
Member Avatar

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.

Re: JQuery get parent tr from child tr 80 80

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");
});
Re: JQuery get parent tr from child tr 80 80

try this ?

$(this).closest('tr').find('td:eq(0)').text();
Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.