javascript - 如何使用 jquery 在现有 li 列表之间添加带有文本的 li 元素？

Question

我有 8 个 li 元素，每个元素的值都在 1 到 8 之间。

<ul>
  <li>1</li>
  <li class="even">2</li>
  <li>3</li>
  <li class="even">4</li>
  <li>5</li>
  <li class="even">6</li>
  <li>7</li>
  <li class="even">8</li>
</ul>

我想在每个具有偶数值的 li 上方插入带有文本“我在 x 之上”的 li。所需的 li 应该看起来像

<ul>
  <li>1</li>
  <li>This is above 2</li>
  <li class="even">2</li>
  <li>3</li>
  <li>This is above 4</li>
  <li class="even">4</li>
  <li>5</li>
  <li>This is above 6</li>
  <li class="even">6</li>
  <li>7</li>
  <li>This is above 8</li>
  <li class="even">8</li>
</ul>

这不能硬编码，因为我已经简化了问题。实际上我想在特定的 li 元素之上动态添加 html。

我尝试使用 .insertBefore() 但这不起作用。

("<li>x</li>").insertBefore$('#listing li.even');

Answer 1

您可以像这样使用 :nth-child() 选择器。

$('li:nth-child(even)').each(function() {
    var num = $(this).text();
  $(this).before('<li> This is before '+ num +'</li>');
})

$('li:nth-child(even)').each(function() {
  var num = $(this).text();
  $(this).before('<li> This is before ' + num + '</li>');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li class="even">2</li>
  <li>3</li>
  <li class="even">4</li>
  <li>5</li>
  <li class="even">6</li>
  <li>7</li>
  <li class="even">8</li>
</ul>