3

假设这甚至是正确的术语,与他们有什么关系?

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:&nbsp;</td>" + 
                    "     <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" + 
                    "     <td>Roles:&nbsp;</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:&nbsp;</td>" + 
                    "     <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" + 
                    "     <td>Roles:&nbsp;</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:&nbsp;</td>
                <td><input type='text' name='UserID[0]'></td>
                <td>Roles:&nbsp;</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”属性,但看起来情况并非如此。相反,该属性属于该数组的成员。无论如何,我如何查找这些数组成员拥有的属性?

4

5 回答 5

2

$(foo, bar)或多或少只是$(bar).find(foo). $(bar)根据 的类型,它本身具有三种完全不同的含义bar

  • ifbar是一个函数,一旦加载文档就运行它;
  • 如果它是一个带有 HTML 标记的字符串,则从其中创建一个 DOM 片段(基本上是网页的一部分,但不附加到当前页面,只是漂浮在空中)
  • 否则将其视为选择器并尝试在当前页面上找到匹配的元素。

所以要做$("#removeUser", "<tr>...</tr>").click(...)的是创建一个tr具有给定内容的新元素,从其中选择具有正确 id 的元素,并为其附加一个点击处理程序。除非您稍后将该元素附加到当前页面,否则这将没有任何效果,因为您正在对不属于页面的分离元素执行人员操作。

于 2012-08-07T16:23:44.850 回答
1

this里面function() { }是被点击的元素。由于您已将 click 事件绑定到 ID 为“removeUser”的元素,因此该元素this将在 click 事件处理程序中引用。jQuery(this).parent().parent()可能会抓取表单元素,但这取决于表单的构建方式以及“removeUser”元素在表单中的位置。

于 2012-08-07T15:44:36.730 回答
1

在我解释代码之前,只有几件事:除非您处于无冲突模式,否则您可以使用$代替来缩短您的代码。jQuery

var myform = '#something'; // not sure what this should be
$("#removeUser", $(myform)).click(function() {
    $(this).parent().parent().remove(); 
});

我看到的是这样的:

$(myform)元素内,搜索点击事件并将其绑定到该#removeUser元素。点击事件函数内部是ID为的thisDOM元素#removeUser(不是jQuery对象)。您正在询问其父级的父级并尝试将其从 DOM 中删除。

jQuery 函数中不需要两个参数。您可以提供一秒钟将上下文限制在 jQuery 应该尝试应用您给它的选择器的位置。但是,由于页面上不应有多个removeUserID,您可以删除第二个参数,并通过简化表单删除代码来清理它:

$("#removeUser").click(function() {
    $(this).parents('form:first').remove();
    // or $(this).closest('form').remove(); as others have suggested
});

更新

鉴于这里真正的“用户”容器是一个表格行 ( <tr>),我将如何更改上面的示例:

首先,myform稍微改变你的代码,让你的按钮和表格行使用类名(不是为了 CSS,而只是为了让 jQuery 能够使用 ID 以外的东西来选择它们):

var myform = "<table>" + 
                "  <tr class=\"userRow\">" + 
                "     <td>User " + jQuerycountForms + ":</td>" + 
                "     <td>UserID:&nbsp;</td>" + 
                "     <td><input type='text' name='UserID["+jQuerycountForms+"]'></td>" + 
                "     <td>Roles:&nbsp;</td>" + 
                "     <td><textarea name='Roles["+jQuerycountForms+"]'></textarea></td>" + 
                "     <td><button class=\"removeUser\" onclick=\"jQuerycountForms--;\">remove</button></td>" + 
                "  </tr><br/>"+
                "</table>";

关于父结构:相对于<button>,它的周围<td>是第一个父结构。的<td>父级是<tr>(第二个父级),而<tr>的父级是<table>(第三个父级)。正如我所说,我将上面的内容更改为使用类名,因此您可以忘记父结构。让 jQuery 为您挖掘层次结构。

您将用于绑定“删除用户”事件的 JS 更改为:

$('.removeUser').click(function() { // ID selector changed to class selector
    $(this).parents('tr.userRow').remove();
});

从技术上讲,您可能会忘记将“userRow”类添加到<tr>并使用:

$('.removeUser').click(function() { // ID selector changed to class selector
    $(this).closest('tr').remove();
});

短而甜。无需.parent()猜测,无需担心重复 ID,并且易于维护。

于 2012-08-07T15:45:26.793 回答
1

让我们先清理你的代码:

$("#removeUser").click(function(){
    $(this).closest('form').remove(); 
}); 

您不需要 jQuery 选择器的第二个参数,this它将引用您传递给它的对象,在本例中是 html 元素#removeUser

closest()将搜索 DOM,直到找到你给它的第一个元素。我只是假设您在这里寻找表单的第一个实例。

我不确定是否是这种情况,但听起来您在页面上显示的每个用户都有一个表单,并且在每个表单内都有一个用于删除它们的按钮。如果是这种情况,那么您应该使用类removeUser而不是 Id。然后我的代码仍然可以正常工作,因为this它将是您单击的按钮,它会从该按钮搜索,直到找到该按钮所在的表单并仅删除该表单。

于 2012-08-07T15:46:53.360 回答
1

你理所当然地感到困惑。该代码实际上没有任何意义。

ID 必须是唯一的,因此没有理由将删除用户过滤到特定表单,因为它不起作用,它只会选择页面上具有给定 ID 的第一个元素。

下面的代码将执行与您的代码相同的操作。

jQuery("#removeUser").click(function(){
    jQuery(this).parent().parent().remove(); 
});

.parent().parent()部分可能应该是jQuery(this).closest("form");jQuery(this).closest("tr");等。

如果您确实有重复的 ID,只需替换id="removeUser"class="removeUser"然后在我提供的代码段中使用.removeUser而不是。#removeUser

于 2012-08-07T15:49:04.983 回答