Question

使用jquery，我想在第三次出现的 class 名称 bottom-col 的第三项列表项下附加一个链接。我弄清楚了如何使用eq（＃）并且可以追加。我只是无法让所有这些都一起工作。例如：

在显示的列表项“电话”下附加列表项“键盘” 在“ bottom-col”类的第3列或第3次出现中

谢谢。

<div class="row">
  <div class="col-md-12 bottom-col">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
  </div>
  <div class="col-md-12 bottom-col">
    <li>apple</li>
    <li>orange</li>
    <li>grape</li>
    <li>lemon</li>
  </div>
  <div class="col-md-12 bottom-col">
    <li>house</li>
    <li>car</li>
    <li>phone</li>
    <li>laptop</li>
  </div>
</div>

Answer 1

您可以使用:eq()选择器。它的索引是从零开始的，因此您要定位的div和li都是:eq(2)。

但是毫无价值的HTML是无效的；您不能将li作为div的子级。您需要将所有li包装在ul中，如下所示：

$('<li>keyboard</li>').insertAfter('.bottom-col:eq(2) li:eq(2)');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12 bottom-col">
    <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
      <li>four</li>
    </ul>
  </div>
  <div class="col-md-12 bottom-col">
    <ul>
      <li>apple</li>
      <li>orange</li>
        <li>grape</li>
      <li>lemon</li>
    </ul>
  </div>
  <div class="col-md-12 bottom-col">
    <ul>
      <li>house</li>
      <li>car</li>
      <li>phone</li>
      <li>laptop</li>
    </ul>
  </div>
</div>

如何在类的第三次出现时将链接附加到第三次<li>

1 个答案: