Jquery add selected class to li

Question

Hi i have following ul li that display categories name:

<ul>
<li class="selected" data-tab-id="0"></li>
<li data-tab-id="12">...</li>
<li data-tab-id="3">...</li>
<li data-tab-id="15">...</li>
<li data-tab-id="7">...</li>
</ul>

The javascript scripts as follow:

<script type="text/javascript">
var cat_id = '<?=$this->catid?>'

$(document).ready(function () {

});
</script>

Currently the page at index so first li data-tab-id="0" will be selected class also var cat_id will be return nothing. Now when user navigate to another tab such as data-tab-id="12", var cat_id will be return value of 12, how can i remove class selected from default li and replace it to data-tab-id="12". Thanks

im not sure what you mean but this is how you add classes $('li').addClass('selected'); and $('.selected').removeClass('selected'); — iConnor, Feb 12 '13 at 13:25
possible duplicate of [Selecting element by data attribute](http://stackoverflow.com/questions/2487747/selecting-element-by-data-attribute) — epascarello, Feb 12 '13 at 13:26
Just a side note, I noticed you are using PHP by seeing the `short tags` above in your code. Be mindful of these tags as they are not available on every installation of PHP. It is a setting in the `php.ini` file that may not be turned on in all installations. This could cause errors when it comes to portability of your code. Stick with ` — War10ck, Feb 12 '13 at 13:29

score 2 · Answer 1 · answered Feb 12 '13 at 13:31

2

Assuming list as ID of the UL – just to avoid problem in case you have multiple UL around the page:

$("ul#list")
    .find(".selected").removeClass("selected")
    .end()
    .find("[data-tab-id=" + cat_id + "]").addClass("selected");

You can also do that in two jQuery calls, of course:

$("ul#list .selected").removeClass("selected");
$("ul#list [data-tab-id=" + cat_id + "]").addClass("selected");

answered Feb 12 '13 at 13:31

ZER0

24,846
5
51
54

Misses the point where the poster says that the cat_id may be empty. Need an if statement around the code. – epascarello Feb 12 '13 at 13:34
As far as I understand from the question, `cat_id` is empty only at startup, when the default `li` is selected. This code is not executed in this context, but when the user navigate on another tab, therefore `cat_id` is set. If it's not the case, then I need a better context from the OP (e.g. when this code will be executed). – ZER0 Feb 12 '13 at 13:37

score 1 · Answer 2 · answered Feb 12 '13 at 13:26

1

use this sample

$('ul li').click(function() {
    $('ul li.selected').removeClass('selected');
    $(this).closest('li').addClass('selected');
})

answered Feb 12 '13 at 13:26

Poster is asking how to select it on page load from a variable. This does not answer that. – epascarello Feb 12 '13 at 13:27
Lets see your answer then please epascarello as i am in need of the same thing :) – iConnor Feb 12 '13 at 13:28
@ConnorMiles: have a look at the question epascarello linked to, above. – Cerbrus Feb 12 '13 at 13:29

bipen · Accepted Answer · 2013-02-12T14:11:51.223

1

use addClass() and removeClass() to add and remove class respectively. try this

updated

var cat_id = '<?=$this->catid?>';
$('li').removeClass('selected'); 
 $('li').each(function(){
   if($(this).attr('data-tab-id')==cat_id){
    $(this).addClass('selected'); 
  }
})

updated without using loop..

var cat_id = '<?=$this->catid?>';
$('li').removeClass('selected');
$('li[data-tab-id='+cat_id+']').addClass('selected');

fiddle here

updated fiddle

edited Feb 12 '13 at 14:11

answered Feb 12 '13 at 13:29

bipen

36,319
9
49
62

sure...let me now if any problem – bipen Feb 12 '13 at 13:32
1

This answer is **bad**, there is no need for the loop! Nothing like reinventing a jQuery selector. – epascarello Feb 12 '13 at 13:57
yes .. thanks for letting me know ....:)..updated my answer.. please check ..out of my mind.. today..:p – bipen Feb 12 '13 at 14:14

Jquery add selected class to li

3 Answers3