在加载时定位子元素的更有效方法答案

【问题标题】：More efficient way of targeting child element on load在加载时定位子元素的更有效方法
【发布时间】：2012-05-11 19:34:18
【问题描述】：

在很多情况下，我在表单中使用 jQuery 的 datepicker。我想要一种通用的方式来应用它，而不知道输入的 id 或类是什么。我想出了这个：

<span id="datePickerChild">
 <input type="text"/>
</span>
<script type="text/javascript">
 $(document.getElementById("datePickerChild").firstChild).datepicker();
</script>

使用 mvc3 框架，这些输入会在运行时根据帮助程序使用自己的 id 等输入，所以我想要这种动态方法。有没有更有效的方法来做到这一点？

编辑：

使用 jQuery 1.4.4

【问题讨论】：

这会起作用，但它只适用于单个元素。 ID 必须是唯一的。
只做$("#datePickerChild:first").datepicker();
该解决方案看起来确实像您知道 an ID 或类名，所以我看不出这比简单地从类名中分配 datepicker 更好。
@KevinB - 我同意，但是，我不会在一页中输入多个日期。
该属性的编辑器模板可以轻松地在元素上提供类名或其他标识符。这似乎是一种解决方法，而不是解决方案。

标签： javascript jquery html jquery-ui-datepicker

【解决方案1】：

这似乎是一个合理的方法。您可能可以使用 jQuery 更“地道”地做到这一点，如下所示：

$('#datePickerChild').children().first().datepicker();

甚至：

$('#datePickerChild > input:first').datepicker();

然而，令人困惑的一点是，尽管您仍然在选择器中使用了 id，但您说您想要这样做而不必知道元素的 id 是什么。如果您尝试“一般”使用该 id（因为它在页面上多次出现），您可能希望使用一个类。一旦你有你需要的元素的类，你只需将你的选择器更改为：

$('.date-picker-container').children().first().datepicker();

【讨论】：

是的。（和填充物使此评论足够长以发表:)
虽然，老实说，我会选择.children() 方法。 jQuery 使用从右到左的查询引擎，因此使用便宜的方法（如 id 或类名）选择某些内容，然后向下钻取会更有效。
在所采取的方法中，您使用.children() 的建议是我最终使用的。

【解决方案2】：

好的，所以根据您的 cmets 说您不知道确切 ID 并且您不想使用类，您不能只进行部分 ID 匹配以匹配所有他们的？比如：

$("[id*=datePicker]").datepicker();

【讨论】：

我不反对使用类名，只是在我的情况下，每页只需要选择一个日期。
小心这一点 - 它会爬取 DOM 中的每个节点，因为它必须检查每个节点的 id 属性，然后如果存在则对其执行正则表达式。
@jmar777 那么会选择一门课吗？它必须爬取 DOM 才能找到该类的元素？
仅在非常旧的浏览器中 - 较新的浏览器具有getElementsByClassName（甚至querySelectorAll）之类的内容。
@TravisJ 即使只出现一次，你最好还是使用一个类，因为你不必对任何其他属性进行任何模糊匹配:)