如何通过jquery得到父类型

-5

如果用户点击一个按钮（类为按钮），那么通过jquery知道父元素的类型有什么方法？让我们看一下布局：如何通过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是表单然后是serializeArray（），或者如果表单类型是表，那么在获取回调数据后，tr将被更新..等等）。这里parent' does not mean the immediate parent of the DOM, rather it means the highest part of the .button`类。

我怎样才能得到父母是形式或表或div等？

来源

2015-08-30 Abdullah Mamun-Ur- Rashid

在点击事件，'$（本）.parent（）丙（ '节点名称'）' –

为什么不要在按钮上放置不同的类，并相应地分配不同的点击事件处理程序？ –

不，它不工作。它正在返回'td'，因为表格或表格是另一个表格'td'的一部分。我已经更新了布局。 Plz审查布局。 –

-1

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

来源

2015-08-30 04:19:33 hardikvd

不，它不工作。它正在返回'td'，因为表格或表格是另一个表格'td'的一部分。我已经更新了布局。 Plz审查布局。 –

-1

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

来源

2015-08-30 04:23:01 Derek

为什么downvote？这正是在OP – Derek

中提出的问题，不是，我不想将它的范围限制在表格或表格中，也可能是段落或div。所以这个类型应该是动态的。它应该返回类型的标签名称。 –

@ AbdullahMamun-Ur-Rashid _“我不会将它的范围限制在表格或表格中，它可能是一个段落或div，所以这个类型应该是动态的。它应该返回类型的标签名称。 “_可以在这个问题中包含这个细节？ – guest271314

你的声明“在这里父[...]表示.button类的最高部分”目前还不清楚。我猜你是指顶部<table>元素的<td>元素中的最高祖先元素。我们称之为“容器”元素。目前，您可以用得到这个元素：

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

来源

2015-08-30 05:32:22

如何通过jquery得到父类型

回答

相关问题