jquery Как получить класс родительского элемента с использованием chlid id?

Question

Я пытаюсь предупредить класс table (parent) при щелчке с помощью дочернего идентификатора <th id="first">.

alert($(this).parent('tr').attr('class')); используя это, у меня есть класс <tr>.

Но я хочу, чтобы получить класс таблицы, когда я использую alert($(this).parent('table').attr('class')); он показывает предупреждение говорит неопределенными может кто-то поможет мне, как родительский класс, используя дочерний идентификатор

<table class="table table-bordered"> 
    <thead> 
     <tr class="sample"> 
     <th id="first">Firstname</th> 
     <th id="last">Lastname</th> 
     <th id="user">Username</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>arun </td> 
      <td>kumaresh</td> 
      <td>arun kumaresh</td> 
      </tr> 
     </tbody> 
    </table> 
     </div> 

<script> 
$(document).ready(function(){ 
    $("#first").click(function(){ 
     alert($(this).parent('tr').attr('class')); 
    }); 
});  
</script> 

Answer 1

Использование .closest(TARGET_SELECTOR), Для каждого элемента в наборе, получить первый элемент, который соответствует селектору, путем тестирования самого элемента и прохождения через своих предков в дереве DOM.

.parent(SELECTOR), Получите родительский элемент каждого элемента в текущем наборе согласованных элементов, необязательно отфильтрованный селектором. (метод parent() траверсы к непосредственного родителя)

$(document).ready(function() { 
 
    $("#first").click(function() { 
 
    alert($(this).closest('table').attr('class')); 
 
    }); 
 
    $("#last").click(function() { 
 
    alert($(this).closest('thead').attr('class')); 
 
    }); 
 
    $(".user").click(function() { 
 
    alert($(this).closest('table').attr('class')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table class="table table-bordered"> 
 
    <thead class='ANY_CLASS'> 
 
    <tr class="sample"> 
 
     <th id="first">Firstname</th> 
 
     <th id="last">Lastname</th> 
 
     <th class="user">Username</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>arun</td> 
 
     <td>kumaresh</td> 
 
     <td>arun kumaresh</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

просто использовать

alert($(this).closest('table').attr('class')); 

см ближе здесь https://api.jquery.com/closest/