Question

我有8个li元素，每个元素的值从1到8。

＆＃13;

<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>

＆＃13;

我想插入带文字的li＆＃39;我高于x＆＃39;高于每一个价值均匀的李。所需的li应该看起来像

＆＃13;

<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>

＆＃13;

由于我简化了问题，因此无法进行硬编码。实际上我想在特定的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>

Answer 2

使用:even选择器，选择元素具有偶数索引，并使用.before( function )在所选元素之前插入html。如果你想在循环中插入html，.before()是一个很好的替代.each()。

$("li:gt(0):even").before(function(i, text){
    return "<li>This is above " + text + "</li>";
});

$("li:gt(0):even").before(function(i, text){
    return "<li>This is above " + text + "</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>

Answer 3

哎呀，这是因为语法很明显。

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

开头的$只是jQuery包装函数的简写，它返回一个jQuery对象。没有它，您尝试在字符串值insertBefore上调用"<li>x</li>"。字符串不具有insertBefore函数，jQuery对象可以。

此外，您还有insertBefore$('...')。 insertBefore是一个函数，insertBefore$不是。您正尝试在字符串上调用insertBefore$，但真正想要的是在jQuery对象上调用insertBefore。

此外，技术上提供的小提琴#listing并不存在，但我保留了它，因为我认为它存在于相关页面上？

Answer 4

$(document).ready(function () {
    $.each($("#listid").find("li:odd"), function () {
        $(this).before("<li>This is above " + $(this).text() + "</li>");
    });
});

工作代码：https://jsfiddle.net/n3tzf2pd/7/

Answer 5

试试这个

<html>
    <script>
        function generate(num) {

            var text = "<ul>";

            for (var i = 0; i < num; i++) {
                text += "<li>text: " + i + "</li>";
            }

            text += "<ul>";

            var div = document.getElementById("your_div");
            div.innerHTML = text;

        }
    </script>
    <body>
        <div id="your_div"></div>
        <input type="button" onclick="generate(8)" value="Generate" />
    </body>
</html>

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

5 个答案: