Question

我试图添加数字项目符号来列出项目以练习jQuery函数。我无法查看代码有什么问题，但它无效。

    <html>
    <head>
        <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
    </head>
<body>
<ui>
<li>Html Tutorial</li>
<li>Mongodb Tutorial</li>
    <li>Python Tutorial</li></ui>

    <script type="text/javascript">
        var i = 0
        var listItems = $("li").each(function() {listItems[i].prepend("<b>" + i + "</b>"); i++;});;
    </script>
  </body>
</html>

Answer 1

在listItems方法迭代所有集合元素之后设置.each()变量的值。在each回调函数listItems中，变量仍为undefined。

可能是：

var i = 0
var listItems = $("li");
listItems.each(function() {listItems[i].prepend("<b>" + i + "</b>"); i++;});

但是使用括号表示法（[index]），返回的元素是一个没有.prepend()方法的DOM元素。您应该使用返回jQuery对象（.eq()）的listItems.eq(i)方法或使用jQuery构造函数包装元素并创建一个jQuery对象以使用jQuery对象的.prepend()方法：

$(listItems[i]).prepend("<b>" + i + "</b>");

each处理程序的第二个参数及其this引用当前元素，不需要缓存集合并使用括号表示法。

$("li").each(function(index) { $(this).prepend("<b>" + index + "</b>") });

此外，代码名称为ul（无序列表），而非ui。如果您想要 ordered 列表，可以使用{{1>}（有序列表）标记，默认情况下会添加数字。

ol

但是，默认情况下，编号从<ol> <li>Html Tutorial</li> <li>Mongodb Tutorial</li> <li>Python Tutorial</li> </ol>开始。您可以将start属性值设置为1：

Answer 2

尝试以下方法，

var i = 1;
   $("li").each(function(){
   $(this).prepend("<b>"+i+" </b>");
   i++;
});

另外，你应该使用ul而不是ui。

此外，我认为实现您想要的最佳方式是使用<ol>

如何在列表的每个项目之前添加标记？

2 个答案: