Question

作为Chrome扩展程序的一部分，我有一行代码可以查找游戏页面中的元素，并添加一些html。我所在的页面上连续有几个div，但没有类或ID，我正在尝试定位第一个添加html的对象。有一个包含唯一文本的h2元素，因此我将其定位为目标，然后尝试使用parents（）。eq（x）到达所需的div。如果我使用eq（1），它将获得h2的父级；但是，如果我使用eq（2），它将跳过第二个div向上移动树，而是将其定位到树上方的元素。

这是我的代码行：

$("h2:contains(New Amsterdam)").parents().eq(1).prepend("<span class=\"HideFJcontainer\" style=\"font-size:18px;\">&nbsp;&nbsp;<input type=\"checkbox\" Id=\"HideFJtrophy\" title=\"When checked your trophies will be hidden\">&nbsp;&nbsp;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的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;">&nbsp;&nbsp;<input type="checkbox" id="HideFJtrophy" title="When checked your trophies will be hidden" checked="checked">&nbsp;&nbsp;Hide/Show</span>
                <div>
                    <h2>New Amsterdam</span>
                        </h2>

*****示例2使用eq（2）*****

<div class="container extraBottom">
        <span class="HideFJcontainer" style="font-size:18px;">&nbsp;&nbsp;<input type="checkbox" id="HideFJtrophy" title="When checked your trophies will be hidden" checked="checked">&nbsp;&nbsp;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>

Answer 1

如果我使用eq（1），它将获得h2的父级...

否，它获取h2的父级的 parent ，因为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;\">&nbsp;&nbsp;<input type=\"checkbox\" Id=\"HideFJtrophy\" title=\"When checked your trophies will be hidden\">&nbsp;&nbsp;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>

.parents（）。eq（2）似乎正在跳过元素

1 个答案: