How to add a class to an element when thead table was click in jquery?

Question

I want to add a class Open to li element on class Menus when user click on thead tr th of my table as below.

This is my table

<div><ul>
 <li class="menus">
    <a></a>
    <ul><li>
     <table id="tableid ">
        <thead>
          <tr><th></th><th></th><th></th></tr>
        </thead>
        <tbody>
            <tr id="1">
                <td></td>
                <td id="type1">types1</td>
                <td></td>
                <td id="types2">types2</td>
                <td></td>
            </tr>
            <tr id="2">
                <td></td>
                <td id="type1">types3</td>
                <td></td>
                <td id="types2">types4</td>
                <td></td>
            </tr>
           </tbody>
       </table>
    </li>
  </ul>
</li></ul></div>

JS

$(document).on('click','#tableid thead tr th', function(){
    var parents = $(this).prevAll().find('li')
    console.log(parents)

});

Answer 1

Use .parents and .addClass

$(document).on('click','#tableid thead tr th', function(){
    var parents = $(this).parents('li.menus').addClass('open')
    console.log(parents)
});