Javascript/jquery - Add a class to list at variable position

Question

I have a variable which contains an item number ... like this:

myvariable = '3'; //Note: This is currently a string so it might need converting?

Then I have the code which populates the listview:

$('#listview').live("pageinit", function(){
$.getJSON("myjson.json", function(data){
    $.each(data.unis, function(index, value){


        $('<li><a class="listitem" href="#">' + value.name + '</a></li>').insertAfter('#' + value.sortLetter);

        $('#' + value.sortLetter).show();

    });

    $("#listview").listview("refresh");


});

All the above works fine.

Now, what I need to do it to insert a class into the item which is at the position myvariable value.

So, if myvariable is 3 then the listview will look like this:

<ul>
<li><a class="listitem" href="#">' + value.name + '</a></li>
<li><a class="listitem" href="#">' + value.name + '</a></li>
<li><a class="listitem AddedClassHere" href="#">' + value.name + '</a></li>
</ul>

if myvariable was to be 1 then:

<ul>
<li><a class="listitem AddedClassHere" href="#">' + value.name + '</a></li>
<li><a class="listitem" href="#">' + value.name + '</a></li>
<li><a class="listitem" href="#">' + value.name + '</a></li>
</ul>

and so on...

How could I do this?

Ram · Accepted Answer · 2012-10-01 13:15:23Z

2

You can use :eq() selector, note that :eq() is zero-based.

$('ul li:eq("'+ (myvariable-1) +'") a').addClass('class');

Or:

$('ul li').eq(myvariable-1).find('a').addClass('class');

edited Oct 1, 2012 at 13:15

answered Oct 1, 2012 at 12:48

Ram

145k16 gold badges174 silver badges201 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FixMaker · Accepted Answer · 2012-10-01 13:07:13Z

2

One way is to build the class list dynamically for each item, optionally adding your class if the index matches the magic number that you specify in your variable. Change your code to this:

$.each(data.unis, function(index, value){
    var classList = 'listItem';
    if(index == (myvariable - 1)) {
        classList += ' addedClass';
    }
    $('<li><a class="' + classList + '" href="#">' + value.name + '</a></li>').insertAfter('#' + value.sortLetter);

    $('#' + value.sortLetter).show();
});

answered Oct 1, 2012 at 13:07

FixMaker

3,9284 gold badges32 silver badges48 bronze badges

Comments

bang · Accepted Answer · 2012-10-02 07:02:02Z

1

There is also an eq() method:

$('ul li').eq(myvariable - 1).find("a").addClass('class');

se http://api.jquery.com/eq-selector/ for more docs.

Note: Watch out if you are using multiple (or nested) ul on same page, then you need a different approach...

edited Oct 2, 2012 at 7:02

answered Oct 1, 2012 at 13:01

bang

5,2711 gold badge28 silver badges31 bronze badges

1 Comment

Ram Over a year ago

It adds the class to li element instead of anchor link.

Collectives™ on Stack Overflow

Javascript/jquery - Add a class to list at variable position

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related