Question

我创建了一个名为billingOptions（）的函数，它与下拉列表（select）元素相关联。当用户在下拉列表中选择一个选项时，将运行该功能。

下拉菜单将通过页面动态添加...每次添加billingOptions（）函数onChange。我试图使用Jquery从更改的下拉列表中找到最近的class = rate实例。请记住，下拉列表是动态添加的，因此可能存在许多.rate ...

的实例

我尝试使用“this”和“nearest”来找到最近的类（我甚至不确定你可以使用具有最接近函数的类）。这是一些代码：

***我被要求提供HTML的确切结构（表的行是动态生成的。表是静态的）。

<table id="billTasks"> 
<tr> <input class="taskNameInput" type="text" size="52" placeholder="Task Name" name="task:1" disabled="disabled"> <select class="billOptions" onchange="billingOptions(this)">
<option class="fixedRate">Bill Fixed Rate</option>
<option class="hourly">Bill Hourly</option>
</select> 
<input type="text" name="fixedRate" placeholder="Rate" class="fieldWidth100 rate"/> 
</tr> 
</table>

function billingOptions(){
 $(this).closest('.rate').hide();
}

***编辑：此代码不起作用。目标是隐藏input.rate元素。

Answer 1

你还没有真正问过一个问题，除了最近与班级合作之外，我设置了这个小提琴，告诉你它的确如此：

http://jsfiddle.net/JAjFF/

如果您可以告诉我们问题是什么，您是否尝试过上述代码，是否有效？如果不是，问题是什么？然后我会修改我的答案。

Answer 2

编辑：首先，您对于this没有传递给该功能的担忧是对的。是正在传递，但它没有被使用。为您的函数指定一个命名参数，并引用该参数而不是this：

function billingOptions(el)
{
    $(el).something()...
}

.rate总是下一个元素吗？如果是这样的话：

$(el).next(".rate").hide();

.rate总是兄弟姐妹吗？是否只有一个.rate兄弟姐妹？如果是这样的话：

$(el).siblings(".rate").hide();

.rate会与您的选择共享一个共同的父级，并且是该公共父级中.rate的唯一实例吗？如果是这样的话：

$(el).closest(".commonParentClassName").find(".rate").hide();

如果这些都不适合您，请提供有关HTML结构的更多详细信息。

修改：感谢您发布HTML结构。您在HTML中缺少<td>。假设您的真实代码包含<td>，并假设每行只有一个.rate，请尝试以下操作：

function billingOptions(el)
{
    $(el).closest("tr").find(".rate").hide();
}

Answer 3

很难确切地知道您的代码正在尝试做什么，但是它存在一些问题。

首先，您将DOM元素传递给函数，但是您的函数没有声明参数，并且您没有访问传入的参数。此外，此上下文中的this引用了Window对象，而不是你想要它的元素。将其更改为此（传入一个命名参数并使用它代替this）将解决这个问题：

function billingOptions(elem){
   $(elem).closest('.rate').hide();
}

您也可以使用arguments集合而不是使用命名参数，但我建议采用上述方法。

下一个问题是closest方法爬上DOM树，直到它找到与您传递它的选择器匹配的第一个元素。在您的情况下，当this引用Window对象时，closest不会找到与您的选择器匹配的祖先。

上面显示的函数也不太可能解决这个问题，因为通过代码的外观，.rate不是所选元素的祖先。我真的需要有关HTML结构的更多信息，以帮助您选择正确的.rate元素（例如，总是会有一个.rate元素，与{{1}在同一个容器中如果是这种情况，这里是working example）。

Answer 4

nearest（）是否与div一起使用？ 是，但它适用于祖先元素

如果.rate元素与SELECT元素位于同一级别，则应使用.siblings（）

如果你的.rate元素在SELECT元素中，你应该使用.children（）

如果你的.rate元素在SELECT元素之外，你应该使用.parent（）

如果您的.rate元素比SELECT元素高出几个级别，那么您应该使用。 nearest（）找到最近的一个。

此外，您的功能很好，您只需要更新选择器。

Jquery onChange运行此函数

4 个答案: