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代码必须确定父表格是表格还是表格或其他表格。我必须根据父类型采取一些操作（即：如果type是form然后是serializeArray（），或者如果form的类型是table，那么在获得回调数据之后，tr将被更新.etc）。这里parent' does not mean the immediate parent of the DOM, rather it means the highest part of the。按钮`类。

如何获取父级是表格，表格还是div等？

Answer 1

你的陈述＆＃34;在这里，父[...]表示.button类的最高部分＆＃34;目前还不清楚。我猜你的意思是顶级<td>元素的<table>元素中最高的祖先元素。让我们称之为＆＃34;容器＆＃34;元件。目前，您可以使用以下方式获取该元素：

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

（注意：如果它上面有id或class就会容易得多。）

现在你可以得到＆＃34;父母的类型＆＃34;单击按钮的元素：

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

jsfiddle

Answer 2

您可以使用$(this).parent().prop("tagName")获取代码名称。我为此创建了fiddle。请检查。

Answer 3

使用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 */ }
});

如何通过jquery获取父类型

3 个答案: