.parents().eq(2)似乎正在跳过元素
.parents().eq(2)似乎正在跳过元素
提问于 2019-09-03 23:18:27
作为Chrome扩展的一部分，我有一行代码，用于查找游戏页面上的元素，并添加一些html。我所在的页面中有几个没有类或ID的div，我尝试以第一个div为目标添加我的html。有一个包含唯一文本的h2元素，所以我的目标是它，然后尝试使用parents().eq(x)来找到我想要的div。如果我使用eq(1)，它将获得div的父元素，但是如果我使用eq(2)，它将跳过在树中向上移动的第二个h2，而以它上面的元素为目标。
下面是我的代码行：
$("h2:contains(New Amsterdam)").parents().eq(1).prepend("<span class=\"HideFJcontainer\" style=\"font-size:18px;\"> <input type=\"checkbox\" Id=\"HideFJtrophy\" title=\"When checked your trophies will be hidden\"> Hide/Show</span>");我正在使用的部分页面的HTML是：
<div class="container extraBottom">
<div id="snackbar"></div>
<div class="col-sm-12 text-center">
<h1>Rogues Gallery</h1>
</div>
<div>
<div>
<h2>New Amsterdam当我使用eq(1)时，它会将跨度添加到h2上的第一个div之前，但如果我使用eq(2)，它会将它放在ID为snackbar的div之前。
谁能解释一下我做错了什么？
谢谢!
*示例1使用eq(1)*
<div class="container extraBottom">
<div id="snackbar"></div>
<div id="FJholder"></div>
<div class="col-sm-12 text-center">
<h1>Rogues Gallery</h1>
</div>
<div><span class="HideFJcontainer" style="font-size:18px;"> <input type="checkbox" id="HideFJtrophy" title="When checked your trophies will be hidden" checked="checked"> Hide/Show</span>
<div>
<h2>New Amsterdam</span>
</h2>*示例2使用eq(2)*
<div class="container extraBottom">
<span class="HideFJcontainer" style="font-size:18px;"> <input type="checkbox" id="HideFJtrophy" title="When checked your trophies will be hidden" checked="checked"> Hide/Show</span>
<div id="snackbar"></div>
<div id="FJholder"></div>
<div class="col-sm-12 text-center">
<h1>Rogues Gallery</h1>
</div>
<div>
<div>
<h2>New Amsterdam</span>
</h2>Stack Overflow用户
发布于 2019-09-03 23:23:44
如果我使用eq(1)，它会得到h2的父类...
不，它获取h2父对象的父对象，因为eq以0开头。parents返回一个jQuery集合，其中第一个条目(.eq(0))是父条目，下一个条目是祖父条目(.eq(1))，依此类推。
如果您希望将跨度插入到h2的父级的父级中，则eq(1)是正确的选择。我添加了边框，以使所发生的事情更加清晰：
$("h2:contains(New Amsterdam)").parents().eq(1).prepend("<span class=\"HideFJcontainer\" style=\"font-size:18px;\"> <input type=\"checkbox\" Id=\"HideFJtrophy\" title=\"When checked your trophies will be hidden\"> Hide/Show</span>");.parent {
border: 1px solid blue;
}
.grandparent {
border: 1px solid green;
}<div class="container extraBottom">
<div id="snackbar"></div>
<div class="col-sm-12 text-center">
<h1>Rogues Gallery</h1>
</div>
<div class="grandparent">
<div class="parent">
<h2>New Amsterdam</h2>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57774591
复制相关文章
相似问题
腾讯云开发者
