假设这甚至是正确的术语,与他们有什么关系?
jQuery("#removeUser", jQuery(myform)).click(
function()
{
jQuery(this).parent().parent().remove();
});
因此,在上面的代码中,构造函数中似乎需要 2 个参数。第一个参数采用名为“removeUser”的 HTML 元素的 id,另一个实际上是 var,它是整个 HTML 元素及其嵌套子元素集合的字符串。
基本上,上面的代码所做的是当有人点击“removeUser”按钮时删除一个表单。我复制了原始代码并对其进行了修改,尽管它(在某种程度上)有效,但我并不完全理解这里发生了什么。
当我尝试仅使用“#removeUser”元素创建新的 jQuery 实例时,我没有得到我想要的结果。它不仅删除了一个“用户”,还删除了所有这些“用户”。所以,这里发生了一些我完全不明白的事情。
那么,在函数内部,“ this
”是谁?它是 removeUser 元素还是字符串?我很混乱!
=============
更新:
因此,根据 Cory 和 Torsten Walter 的评论,我可以给 jQuery“构造函数”提供如下内容:
jQuery("#removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button id=\"removeUser\">remove</button></td></tr>").click(
function()
{
jQuery(this).parent().parent().remove();
}
);
或者,以下,对于那些不喜欢使用“jQuery”的人:
$("#removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button id=\"removeUser\">remove</button></td></tr>").click(
function()
{
$(this).parent().parent().remove();
}
);
另外,我注意到有些人不喜欢我使用非唯一 ID,所以我可以有类似的东西:
$("button", "<tr name=parent1><td>User: </td><td name=parent2><button>remove</button></td></tr>").click(
function()
{
$(this).parent().parent().remove();
}
);
因为,无论如何,每个“用户”只有一个按钮。
另外,有些人建议我改用一个类。除了不使用第二个参数的建议外,它不会给我想要的结果。
$(".removeUser", "<tr name=parent1><td>User: </td><td name=parent2><button class=\"removeUser\">remove</button></td></tr>").click(
function()
{
$(this).parent().parent().remove();
}
);
以上将删除所有“用户”,这不是我想要的。
=============
更新:
另外,我对“parent1”和“parent2”的看法是错误的,对吧?它实际上根本没有访问 parent1 是吗?
我对 myform 的实际拥有如下:
var myform = "<table>"+ //<---parent 1, right?
" <tr>" + //<--parent 2?
" <td>User " + jQuerycountForms + ":</td>" +
" <td>UserID: </td>" +
" <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" +
" <td>Roles: </td>" +
" <td><textarea name='Roles["+jQuerycountForms+"]'></textarea></td>" +
" <td><button id=\"removeUser\" onclick=\"jQuerycountForms--;\">remove</button></td>" + //Or, is that "td" parent2?
" </tr><br/>"+
"</table>";
在我的 HTML 中,我有如下内容:
<div id="container">
<table>
<tr>
<td><button id="addUser" type="button">add</button></td>
</tr>
</table>
</div>
“addUser”按钮的作用是添加另一个用户。有一些 jQuery javascript 执行添加附加到此元素的新用户。
当我试图摆脱变量的外部table
元素myform
时,每当我单击删除的用户时都会遇到问题。最终发生的是我最终删除了整个第一张桌子。
因此,以下值为myform
:
var myform = " <tr>" + //Now the "table" element shown earlier in the HTML is parent1!
" <td>User " + jQuerycountForms + ":</td>" +
" <td>UserID: </td>" +
" <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" +
" <td>Roles: </td>" +
" <td><textarea name='Roles["+jQuerycountForms+"]'></textarea></td>" +
" <td><button id=\"removeUser\" onclick=\"jQuerycountForms--;\">remove</button></td>" +
" </tr><br/>";
将导致不再有add
按钮。
那么,removeUser
巴顿的父母是谁?哪一个是最亲近的父母,谁是其父母?
由于它是 Javascript,因此我实际上无法看到对 HTML 进行了哪些更改。如果这是 Java 呈现的,则更改将反映在 HTML 源中。但是,有了这个,就像我留下了我的想象力来解决问题。而且,如果您对 Javascript 不太熟悉,那么可能很难看到发生了什么。
=============
更新:
因此,我对单击一个用户后 HTML 可能是什么样子的猜测是:
<div id="container">
<table>
<tr>
<td><button id="addUser" type="button">add</button></td>
<table> <!-- Well, I'm definitely the grand parent. -->
<tr> <!-- But, am I anyone's parent? -->
<td>User 0:</td>
<td>UserID: </td>
<td><input type='text' name='UserID[0]'></td>
<td>Roles: </td>
<td><textarea name='Roles[0]'></textarea></td>
<td> <!-- Or, am I the daddy? -->
<button id=removeUser onclick="jQuerycountForms--;">remove</button>
</td>
</tr><br/>
</table>
</tr>
</table>
</div>
所以,基本上,我的问题的第二部分是,“谁是第一个访问的父母(parent2)?” 是元素td
还是tr
元素?为什么它不认为那tr
是 的父母td
?看起来确实如此。
=============
更新:
这是对 Cory 的 jsFiddle 链接的回应(谢谢,顺便说一句,这似乎是一个有用的工具)。以下代码显示了结构
var button = $('.removeUser');
alert("Me = " + button[0].tagName); //button
alert("Parent = " + button.parent()[0].tagName); // td
alert("Grand-Parent = " + button.parent().parent()[0].tagName); // tr
alert("Great Grand-Parent = " + button.parent().parent().parent()[0].tagName); // tbody
alert("Great, Great Grand-Parent = " + button.parent().parent().parent().parent()[0].tagName); // table
所以,让我直截了当。如果这是一种真正的 OOP 语言,那么我们将有如下内容:
Jquery button = new Jquery('.removeUser');
这个jQuery
“类”实际上是某种集合,但是,显然,它只有一个成员?单个成员具有诸如“tagName”之类的属性以及其他属性。
然而,jQuery 类本身具有允许用户导航 DOM 树(相对于该树的根)的方法。
我发现如果我有两个“removeUser”按钮,那么我也可以对按钮 [1] 使用数组表示法。但是,当然,你不能有一个以上的父母,所以任何东西parent()[1]
都行不通。
通常,我会假设 jQuery 拥有“tagName”属性,但看起来情况并非如此。相反,该属性属于该数组的成员。无论如何,我如何查找这些数组成员拥有的属性?