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

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

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

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

• javascript
• jquery
• sorting
• text

• 1 Why aren't the items already in an Ordered List? – DA. Commented Nov 6, 2009 at 17:37

6 Answers 6

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.

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;
        });
    )};
});

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

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

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.

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

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);
}