Numbering in jQuery

Question

How could I change the text below so that the text within it has a number appended to it.

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

So the code above would become,

1. This is some text
2. This is some text
3. This is some text

Answer 1

you should use an ordered list... ol

or else you will need use css and add the content property your selector with the :after pseudo element.

Answer 2

Does this have to be done dynamically through jquery? Can't you just combine all that text into one div and then make a ordered list around it?

Answer 3

jQuery selectors are your friend... Get your stuff and loop on through something like this:

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

Update: Jeez, last time post untested code straight off the dome here (disclaimer: not actually the last time). In the interest of correctness, I've updated it to at least run (and work!) if you still want to do it this way. Although I admit the other solutions are cleaner and more elegant.

Answer 4

This is really an elaboration on another comment. I can't format code in a comment, I guess. You could use jQuery core's each:

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

Answer 5

How about the following?

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

UPDATE:

Here is one way that should work.

"number" is a custom element (it can be anything you want) that will/should be ignored by browsers.

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

OR use the following which is probably a little slower but semantically correct...

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

OR an even better way would be to prepend span.number before your first drag:

$(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 6

Using [] notation with a result set will give you the raw DOM element which does not have the html() function. Use the eq() function to get each element wrapped in a jQuery object.

You can also use each() as mentioned above, but I prefer straight 'for loops' so I don't have to adjust for 'this' if I'm in an event handler.

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