javascript - jquery 元素寻址的 javascript 替代方案

Question

什么是 Javascript 替代品：

$('#clientDetailModal #heightValue')

我需要它，因为在我的代码中这是有效的：

document.getElementById('heightValue').checkValidity()

但这不是：

$('#clientDetailModal #heightValue').checkValidity()

我只需要在 clientDetailModal div 中选择 heightValue。

score 5 · Accepted Answer

尝试$('#clientDetailModal #heightValue')[0].checkValidity()

您需要这样做的原因[0]是，（根据 jquery id 选择器文档）

使用 id 选择器作为参数调用 jQuery()（或 $()）将返回一个 jQuery 对象，该对象包含零个或一个 DOM 元素的集合

由于您将获得一个包含 1 个 DOM 元素的集合（假设您没有多个 id），因此您需要使用[0].

score 2 · Accepted Answer

您可以使用get获取 DOM 元素：

$('#clientDetailModal #heightValue').get(0).checkValidity()

可以肯定的是，因为您的问题可能有点模棱两可：在 HTML 中只有一个元素可以具有给定的 ID。因此，如果您的元素不存在或存在于内部#clientDetailModal，那么您也可以使用

$('#heightValue').get(0).checkValidity()

它也会更快。但在那种情况下，使用document.getElementById.

score 1 · Accepted Answer

由于document.getElementById('heightValue').checkValidity()有效，这意味着您的函数checkValidity()附加在本机 DOM 元素上。这意味着，您可以执行以下操作：

$('#clientDetailModal #heightValue')[0].checkValidity()

加：如果您的 HTML 有效且没有重复的 ID，您可以简单地执行

$('#heightValue')[0].checkValidity()

score 0 · Accepted Answer

由于 OP 要求使用 JavaScript 替代方案。在现代浏览器上，

document.querySelector ('#clientDetailModal #heightValue')

将返回您要求的元素。

直接等价物是

document.querySelectorAll ('#clientDetailModal #heightValue')

它返回与请求的选择器匹配的元素数组，您是否需要根据其他答案添加 [0]。

score -1 · Accepted Answer

我想这就是你要找的：

document.getElementById('clientDetailModal').getElementById('heightValue').checkValidity();

5 回答 5