CODEWITHSUNDEEP
javascriptjquerysortingtext
usertest
usertest

Reputation: 27628

Numbering in jQuery

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

Upvotes: 1

Views: 2210

Answers (6)

pivotal
pivotal

Reputation: 746

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.

Upvotes: 1

David Murdoch
David Murdoch

Reputation: 89312

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

Upvotes: 2

jshalvi
jshalvi

Reputation: 72

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

Upvotes: 0

user8710
user8710

Reputation:

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

Upvotes: 1

chobo2
chobo2

Reputation: 85775

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?

Upvotes: 0

Kevin
Kevin

Reputation: 26524

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.

Upvotes: 5

Related Questions