Question

我如何更改下面的文字，以便其中的文字附加一个数字。

<div class="right">This is some text</div>
<div class="right">This is some text</div>
<div class="right">This is some text</div>

所以上面的代码会变成，

这是一些文字
这是一些文字
这是一些文字

Answer 1

你应该使用有序列表...... ol

否则你需要使用css并使用：after伪元素添加你的选择器的content属性。

Answer 2

以下情况如何？

$("div.right").each(function(i){
    $(this).prepend((i + 1) + ". ");
});

<强>更新

这是一种应该有效的方法。

“number”是一个自定义元素（可以是任何你想要的东西），浏览器会/应该忽略它。

$("div.right").each(function(i){
    $(this).find("number").remove().end()
           .prepend("<number>(i + 1) + ". </number>");
});

或者使用以下可能有点慢但语义正确的......

$("div.right").each(function(i){
    $(this).find("span.number").remove().end()
           .prepend("<span class='number'>" + (i + 1) + ". </span>");
});

或者更好的方法是在第一次拖动之前添加span.number：

$(function(){ // document ready...
   // caching the "numbers" will only work if you use the DOM
   // for updating div position (like jQuery's "append()", "prepend()", "before()", and "after()") and not "innerHTML" or "html()"
   var numbers = $("div.right").each(function(i){
        $(this).prepend("<span class='number'>" + (++i) + "</span>. ");
    }).find("span.number");

    function dragEnd(){
        // do your drag end stuff here...
        numbers.each(function(i){
            this.innerHTML = ++i;
        });
    )};
});

Answer 3

jQuery选择器是你的朋友...... 通过这样的方式获取你的东西并循环：

texts = $("div.right");
for(i = 0;i < texts.length;i++)
{
     node = $(texts[i]);
     content = node.html();
     number = i + 1;
     node.html(number + ". " + content);
}

更新： Jeez，上次在这里直接发布未经测试的代码（免责声明：实际上不是最后一次）。为了正确起见，我已将它更新为至少运行（和工作！），如果你仍然想这样做的话。虽然我承认其他解决方案更清洁，更优雅。

Answer 4

这是对另一条评论的详细阐述。我想，我无法在评论中格式化代码。您可以使用每个jQuery核心：

$('div.right').each(function(ii){
     html = $(this).html();
     $(this).html(ii + '. ' + html);
});

Answer 5

这是否必须通过jquery动态完成？你不能只将所有文本组合成一个div，然后围绕它创建一个有序列表吗？

Answer 6

对结果集使用[]表示法将为您提供没有html（）函数的原始DOM元素。使用eq（）函数将每个元素包装在jQuery对象中。

您也可以使用上面提到的each（），但我更喜欢直接'for循环'，所以如果我在事件处理程序中，我不必调整'this'。

var texts = $("div.right");
var elem;
for(i = 1; i < texts.length; i++) {
    elem = texts.eq(i);
    html = elem.html();
    elem.html(i + '. ' + html);
}

在jQuery中编号

6 个答案: