Как получить тип родителя с помощью jquery

Question

Если пользователь нажимает на кнопку (класс как кнопка), то каков способ узнать тип родительского элемента по jquery? Давайте посмотрим на макете:

<table> 
<tr><td>Menu</td></tr> 
<tr><td>Submenu of the page</td><td> 
<form action=""> 
    <input type="text" name="fullname" value="" /> 
    <input type="password" name="password" value="" /> 
    <input type="submit" class="button" value="Submit" /> 
</form> 

<table> 
    <thead><tr><th>Name</th><th>Password</th><th>Action</th></tr></thead> 
    <tbody> 
      <tr><td>Mr.X</td><td>1234</td><td><input type="button" class="button" value="check" /></td></tr> 
      <tr><td>Mr.Y</td><td>1234</td><td><input type="button" class="button" value="check" /></td></tr> 
      <tr><td>Mr.Z</td><td>4567</td><td><input type="button" class="button" value="check" /></td></tr> 
    </tbody> 
</table> 
<div> 
this is some text and the below button check whether it is div<br /> 
<input type="button" class="button" value="check" /> 
</div> 
</td> 
</tr> 
</table> 

Теперь, если пользователь нажмет либо на Submit кнопке формы или check кнопку таблицы, JQuery код должен определить, является ли родитель формы или таблицы или что-то есть. Я должен принять какое-то действие в зависимости от типа родителя (i.e: if type is form then serializeArray(), или если тип формы является таблицей, то после получения данных обратного вызова tr будет обновляться ..etc). Здесь parent' does not mean the immediate parent of the DOM, rather it means the highest part of the .button` класс.

Как я могу получить, является ли родитель формой или таблицей или div и т. Д.?

Answer 1

Вы можете использовать $(this).parent().prop("tagName"), чтобы получить имя тега. Для этого я создал fiddle. Пожалуйста, проверьте.

Answer 2

Использование closest():

$('.button').on('click', function() { 
    if ($(this).closest('form').length) { /* it's inside a <form> block */ } 
    else { /* it's not inside a <form> block */ } 
}); 

Это (в сочетании с текущим DOM), вероятно, плохой дизайн, однако. Я хотел бы сделать что-то вроде этого, вместо:

<table> 
    <tr><td>Menu</td></tr> 
    <tr><td>Submenu of the page</td><td> 
     <form action=""> 
      <input type="text" name="fullname" value="" /> 
      <input type="password" name="password" value="" /> 
      <input type="submit" class="button" data-button-type="form" value="Submit" /> 
     </form> 
     <table> 
      <thead><tr><th>Name</th><th>Password</th><th>Action</th></tr></thead> 
      <tbody> 
       <tr><td>Mr.X</td><td>1234</td><td><input type="button" class="button" data-button-type="table" value="check" /></td></tr> 
       <tr><td>Mr.Y</td><td>1234</td><td><input type="button" class="button" data-button-type="table" value="check" /></td></tr> 
       <tr><td>Mr.Z</td><td>4567</td><td><input type="button" class="button" data-button-type="table" value="check" /></td></tr> 
      </tbody> 
     </table> 
    </td></tr> 
</table> 

Ваш JS будет:

$('.button[data-button-type]').on('click', function() { 
    var buttonType = $(this).attr('data-button-type'); 
    if (buttonType === 'form') { /* Handle form buttons */ } 
    else if (buttonType === 'table') { /* Handle table buttons */ } 
    else if (buttonType === 'div') { /* Handle div buttons */ } 
}); 

Answer 3

Ваше заявление «Здесь родитель [...] означает, что самая высокая часть .button класса» неясно. Я предполагаю, что вы имеете в виду элемент верхнего предка, который находится в элементе <td> верхнего элемента <table>. Назовем этот элемент «контейнером». В настоящее время, вы можете получить этот элемент с помощью:

var $container = $('body>table>tbody>tr:last>td:last'); 

(Примечание. Это было бы намного проще, если бы это было на id или в class на нем)

Теперь вы можете получить тип " элемент родительского»для щелкнули кнопку с помощью:.

$(".button").click(function() { 
    var parentType = $(this).parentsUntil($container).last().prop('nodeName'); 
    alert(parentType); 
}); 

jsfiddle