如何将选择器与 JavaScript 标识符正确组合？

Posted 2023-05-09

【中文标题】如何将选择器与 JavaScript 标识符正确组合？

【英文标题】：How to properly combine selectors with JavaScript identifiers?

【发布时间】：2016-11-07 02:05:31

【问题描述】：

我在 javascript 中选择了一个 DOM 元素。

var myParentElement = document.getElementById('myParentId');

现在，假设我想使用 jQuery 选择第一个元素，它是该元素的子元素，是可见的、启用的输入元素，并且具有给定属性的特定值（在这里，我想检查元素的名称）。

$([name="myChildName"]).children(':input:enabled:visible:first'); // ?

上面的sn-p是不正确的，我该如何解决呢？ （我懂一点 CSS，但不太懂 jQuery）。

附加要求：我仅限于 jQuery 1.7.2

编辑：抱歉，实际上比第一行稍微复杂一点，因为我有一个名字，而不是一个 ID。

无论如何，感谢您的建议，我找到了我正在寻找的解决方案： $("[name=' + myNameIdentifier +']").filter(":input:enabled:visible:first"); IIRC 第一对引号是必须的，不包括它们是一个明显的错误。

此外，我忽略了孩子、查找和过滤之间的区别，所以我的问题不清楚。我想选择具有给定名称的所有元素，然后对该选择应用过滤器（不关心孩子或后代）。

【参考方案1】：

使用children selector(>)

$('#myParentId > [name="myChildName"]:input:enabled:visible:first')

【讨论】：

我没有想到这一点，尽管它是如此明显:(谢谢！:)

【参考方案2】：

$.children() 返回一个元素的所有子元素，因此您的代码实际上试图在[name="myChildName"] 元素内部 找到:input:enabled:visible:first，而不仅仅是过滤它。你可能想要：

$('#myParentId').children(':first-child:enabled:visible')

【讨论】：

感谢您的解释，但是我不太明白，$([name="myChildName"]) 不应该给我一个元素列表，而不是一个元素吗？ （afaik，名称与 id 不同，在文档中不需要是唯一的）。另外，关于您提出的代码，不是 .children jQuery 特定的吗？ myParentElement 没有选择 jQuery 的方式，所以它是一个常规的 htmlElement。他们不允许使用 jQuery 的 .children()，是吗？

1. $([name="myChildName"]) 确实返回了一个列表。但是，.children() 并不意味着“列表的所有成员......”，它的意思是：“给定元素的子元素” 2. 你是对的，我刚刚修复了我的代码，以便它与 jquery 一起使用，而不是与常规 HTMLElement 对象一起使用。