Question

我正在工作的项目有一个代码，其中有几个子组件被加载到主视图中，其中一些实际上具有相同的ID。

加载后代码部分如下所示

<div id="container">
    <div></div>
    ...
    <div id="subject"></div>
    ..
    <div id="some_other"></div>
    ...
    <div id="subject"></div>
    ...
</div>
<div id="container2">
    <div></div>
    ...
    <div id="subject"></div>
    ...
    <div id="some_other"></div>
    ...
    <div id="subject"></div>
    ...
</div>

我知道保留具有相同ID的元素并不是一个好习惯。但在这种情况下，我无法实际修改HTML。

所以现在按照我的逻辑，我想隐藏一些元素（在容器中有id＆＃39; 主题＆＃39;） div元素。为了问题，我想要隐藏带有ID＆＃39;主题＆＃39; 的第一个div，因为有多个元素带有id＆＃39; subject＆＃39;。

我尝试的方法是

containerElt = $("#container");
relevantDiv = $("#subject",containerElt);
relevantDiv.hide();

但它会隐藏容器div中的所有元素，其中包含id＆＃39; subject＆＃39;。是否有任何顺利的方式来实现我的要求。

如果可以对第n个元素进行此操作，那将会很优雅。但是绰绰有余的人可以告诉我如何为第一个带有id＆＃39; subject＆＃39;。＆＃39;。

的div。

Answer 1

使用：

containerElt = $("#container");
// find the element with `subject` id(first matched element only)
containerElt.find('[id="subject"]:first').hide();
// or
containerElt.find('[id="subject"]:eq(0)').hide();

Answer 2

参见JSFiddle https://jsfiddle.net/tf1qyr4m/

要获得第n个元素.eq（index） - index基于零。所以：

relevantDiv = $('[id="subject"]').eq(0);
relevantDiv.hide();

隐藏第一个。

编辑：请注意，您必须使用$（＆＃39; [id =＆＃34; subject＆＃34;]＆＃39;）才能选择多于第一个元素。

https://api.jquery.com/eq/

选择具有相同ID的第n个html DOM元素

2 个答案: