Select the element with a variable class

Question

i am not able to select the element with class of a particular value for the below line

My HTML is

<ul class=nav>
   <li class="home">
       <a href="">HOME </a>
   </li>
   <li class="bye">
       <a href="">BYE </a>
   </li> 
</ul>

<script>
$("ul.nav li").click(function(e) {
   $('.home').addClass('.newhome').removeClass('.home');
    alert("done");
});
</script>

My CSS is

li.newhome {
    background: #678fef no-repeat;
     color:#fff;
    }

li.home{ 
 background: #666 no-repeat;

Here's a JSFiddle.

shouldn't you be using $(this) instead of $this? and what's []? — Kyle Yeo
– Kyle Yeo, Commented Jul 27, 2013 at 10:39
That code doesn't really make much sense. What is $this. why are you storing the classes like that in the first place, why are you setting the attribute and not the property (className) with one of the many methods in jQuery etc. Explain as simple as possible what the intended functionality is, and maybe someone will suggest a better way to do it. — adeneo
– adeneo, Commented Jul 27, 2013 at 10:48
and your <a> tags are useless if you don't put anything in. Unless you're going to put an background image as a link. — Kyle Yeo
– Kyle Yeo, Commented Jul 27, 2013 at 10:58

Tushar Gupta - curioustushar · Accepted Answer · 2013-07-27 10:43:00Z

3

var lastclickedclass=".home";
var updatedlastclass=".newhome";

$(lastclickedclass) is equivalent to $('.home')

for adding class you can use

$('.home').addClass('.newhome');

if you want to replace class

$('.home').addClass('.newhome').removeClass('.home');

if you want to refer in current code use

$(this).find('.home').addClass('.newhome');

answered Jul 27, 2013 at 10:43

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

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

Comments

Kyle Yeo · Accepted Answer · 2013-07-27 11:11:10Z

0

You can see the cleaned up fiddle at http://jsfiddle.net/ELbCx/15/.

What you just copy and pasted isn't even how jQuery works. If jQuery can't read it, it can't execute it.

Code is here:

HTML

<ul class=nav>
    <li class="home">HOME</li>
    <li class="bye">BYE</li> 
</ul>

jQuery

$("ul.nav li").click(function(e) {
    $(this).removeClass('home bye');
    $(this).addClass("newHome");
});

EDIT: Added removeClass to remove the existing classes.

edited Jul 27, 2013 at 11:11

answered Jul 27, 2013 at 10:48

Kyle Yeo

2,3686 gold badges31 silver badges53 bronze badges

2 Comments

dimple Over a year ago

yep i m tried expanding the code further plz see this when i click on bye the home1 class shud be reset to home but it doesn't jsfiddle.net/genius2k/ELbCx/18/...but it doesn't plz help

Kyle Yeo Over a year ago

You've already accepted Tushar's answer, now all you need to do is figure it out to put it into code.

Anand Jha · Accepted Answer · 2013-07-27 11:27:31Z

0

if you want to replace the existing class with a class by clicking on 'li' then it could be helpful..

$("ul.nav li").click(function(e) {
        $(this).removeClass($(this).attr('class')).addClass("newHome");
 });

answered Jul 27, 2013 at 11:27

Anand Jha

10.8k6 gold badges28 silver badges29 bronze badges

Collectives™ on Stack Overflow

Select the element with a variable class

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related