0

I have problem with adding class to every list element. This is example html:

<ul id="main_list">
    <li>item1</li>
    <li>item2<li>
<ul>

And my jquery code which i don't understand why it don't work like i expect:

   $(function(){
        $('#main_list').children().each(function(){
            $(this).addClass(function(){
                return $(this).index()})
            })
          })
krzyhub
  • 6,285
  • 11
  • 42
  • 68
  • 1
    what exactly are you trying to do.. add each element's index as a class? If so thats what an id is for. – locrizak Jul 27 '11 at 17:13
  • I want every li's elements to have class equal to it place in elements set. – krzyhub Jul 27 '11 at 17:15
  • Why add a unique numbered class to every li tag? What possible use is this? Do you also realize that a valid class name can't begin with a digit character: http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names – jfriend00 Jul 27 '11 at 17:18
  • Again you should be adding an id with this not a class. And why bother to do that if you can get the reference through `$(this).index()` off of any event? – locrizak Jul 27 '11 at 17:18
  • @locrizak: No reason to use `id` values for that. What if he has two lists on the page, for instance? – T.J. Crowder Jul 27 '11 at 17:18
  • I am trying to build a little complicated for me tree, and for now i see need to giving unique class to every element. Ids are occupated fields. – krzyhub Jul 27 '11 at 17:22

3 Answers3

3

It's because the jQuery object on which you're calling addClass has only one item in it (you're creating that jQuery object via $(this)). Try this:

$("#main_list > li").addClass(function() {
    return $(this).index();
});

...if you're really trying to assign classes like 0, 1, etc. I think I'd probably put something in front of those numbers, though; I can't immediately find it in the spec, but I don't think class names can start with digits. So:

$("#main_list > li").addClass(function() {
    return 'n' + $(this).index();
});

...for n0, n1, etc.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • Valid class names can't start with a digit. – jfriend00 Jul 27 '11 at 17:23
  • I don't care of is class name is vali or not. I just need them working. They will working good with class name as number? – krzyhub Jul 27 '11 at 17:26
  • @jfriend00: I was thinking that too, but then didn't comment because I couldn't immediately find it in the spec. Can you? – T.J. Crowder Jul 27 '11 at 17:26
  • @Cris: I would recommend putting a letter in front of them (updated the answer). – T.J. Crowder Jul 27 '11 at 17:27
  • I don't know this yet, so i ask: if i add letter in front of number, can i cut this lettr latter to get only number? – krzyhub Jul 27 '11 at 17:28
  • @T.J. Crowder - It's here: http://www.w3.org/TR/CSS21/grammar.html#scanner. A class is an identifier which in the grammer is `-?{nmstart}{nmchar}*` where nmstart is `[_a-z]|{nonascii}|{escape}`. Numbers are then allowed after a non-dash character. – jfriend00 Jul 27 '11 at 17:31
  • @Cris, see my answer below. I think maybe you want to put a sequence number as data on the object (not in a class name) that you can access at any time later. This would make more sense than trying to parse a number out of a class name when you have no other use for the class name. – jfriend00 Jul 27 '11 at 17:39
  • So if You saying that i belive. I need to read this doct and try to understand. – krzyhub Jul 27 '11 at 17:39
  • @Cris, just see my answer below. No need to read the long spec doc - that was for T.J. who wanted to see the actual grammer for a class name. – jfriend00 Jul 27 '11 at 17:42
  • 1
    @Cris: Yes, you can easily remove it via `cls = cls.substring(1)` if `cls` is the class name. But if you're not using these classes in your stylesheets, you may want to go with `data` instead as jfriend points out. – T.J. Crowder Jul 27 '11 at 18:34
2

To make valid class names (which can't start with a digit):

$("#main_list li").addClass(function() {
    return("myItem" + $(this).index());
});

But, it sounds to me like you might rather be setting an id:

$("#main_list li").attr("id" function() {
    return("myItem" + $(this).index());
});

Looking at Cris' (the original poster) comments to other answers, it sounds like what you want to do is to be able to extract the ordered position from the object at some later date. It might be easier to just put a data attribute on the object that represents it's order like this:

// put an attribute on each object that represents it's index so that's easier to get later
$("#main_list li").each(function(index){
    $(this).data("pos", index);
});

Then later, you can access that data value with this:

item.data("pos");

This seems a lot cleaner to me than parsing a number out of class name that you have no other use for.

Example here: http://jsfiddle.net/jfriend00/RDvw2/.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • It give me some new light of waht can i do by jquery. Maybe i find use for this. I need to see again my code and that what i expect it to do. Thank You. – krzyhub Jul 27 '11 at 17:45
  • FYI, adding your own attributes to an object doesn't require jQuery (it's easy to do in plain javascript), but jQuery makes it pretty simple. – jfriend00 Jul 27 '11 at 17:49
  • I prefer jquery more than js because i have no skills yet in js and i need do something very quick. – krzyhub Jul 27 '11 at 17:54
  • No problem, just wanted to add that this feature isn't unique to jQuery. – jfriend00 Jul 27 '11 at 17:56
  • For example every first element in collection will has this same position if i use `.each(function(index){ $(this).data("pos", index);` – krzyhub Jul 27 '11 at 18:01
  • @Cris - were you asking a question? If so, I don't follow what you're asking. – jfriend00 Jul 27 '11 at 19:39
  • Now i am not asking, i just give assertion. – krzyhub Jul 27 '11 at 19:50
1

I assume you are trying to number the li's based on their position in the ul?

function addClasses( )
{
    $( '#main_list' ).children( ).each( function( index )
    {
        $( this ).addClass( 'myClass' + index );
    } );
}

edit: as jfriend00 pointed out, class name can not start with a digit.

ssell
  • 6,429
  • 2
  • 34
  • 49