jQuery addClass question

Question

I want to add a class to multiple span elements with common classname's based on the classname of a link that is being clicked. This works for me only for the first element (1). The rest gives no result (also no error). Here is the code I'm trying to get functional, first HTML then the jQuery part:

<ul id="brancheNav">
    <li><a href="#" class="brancheTab" id="brancheTab1">Duurzaam</a></li>
    <li><a href="#" class="brancheTab" id="brancheTab2">B-to-B</a></li>
    <li><a href="#" class="brancheTab" id="brancheTab3">Healthcare</a></li>
    <li><a href="#" class="brancheTab" id="brancheTab4">Dienstverlening</a></li>
</ul>
<div class="opdrachtgevers">
<p>
    <span class="branche1">ADFSDFSDF</span>&nbsp;
    <span class="branche1">IUYIUYIU</span>&nbsp;
    <span class="branche1">CVCBVCV</span>&nbsp;
    <span class="branche4">MNBBMNBMB</span>&nbsp;
</p>
</div>

        $("a.brancheTab").click(function(){         
            sClickedId = $(this).attr('id');                
            sId = sClickedId.substr((sClickedId.length - 1),1);
            //alert('addClass: ' + sId);
            $('span.branche'+sId).addClass('active');
        });

Can you try this: (perhaps in the firebug console) alert($('span.branche1').length); — Ben Scheirman
– Ben Scheirman, Commented Jul 9, 2009 at 13:39
The first three spans have the class branche1. Are they supposed to be branche1, branche2, and branche3? — Patrick McElhaney
– Patrick McElhaney, Commented Jul 9, 2009 at 13:40
Ben: the result is 21 (as in 21 span's with class branche1) Patrick: You're right, I copied a small snippet of the whole list which consists of spans with class branche1 to branche4 — tvgemert
– tvgemert, Commented Jul 9, 2009 at 13:44
Tom: that verifies that your html is valid (at least enough for jquery's parser). — Ben Scheirman
– Ben Scheirman, Commented Jul 9, 2009 at 13:49
Just a tip, instead of checking for the length of the ID-string, you can use the start index -1 for getting the last character of the string. (developer.mozilla.org/en/Core_JavaScript_1.5_Reference/…) — nikc.org
– nikc.org, Commented Jul 9, 2009 at 13:56

cletus · Accepted Answer · 2009-07-09 13:50:11Z

3

I'd simplify it somewhat:

<ul id="brancheNav">
  <li><a href="#" id="tab1">Duurzaam</a></li>
  <li><a href="#" id="tab2">B-to-B</a></li>
  <li><a href="#" id="tab3">Healthcare</a></li>
  <li><a href="#" id="tab4">Dienstverlening</a></li>
</ul>
<div class="opdrachtgevers">
<p>
  <span class="btab1">ADFSDFSDF</span> 
  <span class="btab1">IUYIUYIU</span> 
  <span class="btab1">CVCBVCV</span> 
  <span class="btab4">MNBBMNBMB</span> 
</p>
</div>

which simplifies your Javascript considerably:

$("#branchNav > a").click(function() {
  $("span.b" + this.id).addClass('active");
});

No point doing string manipulation when you don't have to. Try to keep your code as simple as possible especially if a relatively minor markup change makes it just that much more readable.

edited Jul 9, 2009 at 13:50

answered Jul 9, 2009 at 13:39

cletus

627k169 gold badges922 silver badges945 bronze badges

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

1 Comment

tvgemert Over a year ago

Thanks, but it should add class to multiple span elements with same classname. It's not very neat to have more than one id with same name.

Patrick McElhaney · Accepted Answer · 2009-07-09 13:49:07Z

The code you have works fine for me. I've pasted a complete page, which I used to test.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="author" content="Patrick McElhaney">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>    
  <script type="text/javascript" charset="utf-8">
    $().ready(function () {
      $("a.brancheTab").click(function(){                     
                              sClickedId = $(this).attr('id');                                
                              sId = sClickedId.substr((sClickedId.length - 1),1);
                              //alert('addClass: ' + sId);
                              $('span.branche'+sId).addClass('active');
                      }); 
    }); 
  </script>            

  <style type="text/css" media="screen">
    .active {font-weight: bold;}
  </style>
</head>
<body>           

  <ul id="brancheNav">
      <li><a href="#" class="brancheTab" id="brancheTab1">Duurzaam</a></li>
      <li><a href="#" class="brancheTab" id="brancheTab2">B-to-B</a></li>
      <li><a href="#" class="brancheTab" id="brancheTab3">Healthcare</a></li>
      <li><a href="#" class="brancheTab" id="brancheTab4">Dienstverlening</a></li>
  </ul>
  <div class="opdrachtgevers">

 <!-- What you have -->
 <p>
      <span class="branche1">ADFSDFSDF</span> 
      <span class="branche1">IUYIUYIU</span> 
      <span class="branche1">CVCBVCV</span> 
      <span class="branche4">MNBBMNBMB</span> 
  </p>

  <!-- What I think you might mean -->
  <p>
      <span class="branche1">ADFSDFSDF</span> 
      <span class="branche2">IUYIUYIU</span> 
      <span class="branche3">CVCBVCV</span> 
      <span class="branche4">MNBBMNBMB</span> 
  </p>

  </div>

</body>
</html>

I'm not sure what you're trying to do, but you might want to add a $('span.branche').removeClass('active') at the beginning so that the "active" class is switched to the selected span, rather than applied cumulatively.

Patrick, thank you very much in advance! This code works perfectly for me too... standalone. I even added some extra span's to check it so my span class numbers now are 1,1,1,1,1,2,3,4,2. But in the code of the website I'm building it still doesn't work. I have one $(document).ready function which has this code amongst others.

Ben Scheirman · Accepted Answer · 2009-07-09 13:51:26Z

0

You shouldn't have to do this, but try this to see if it works:

$("span.branche" + sId).each(function() {
    $(this).addClass("active");
});

answered Jul 9, 2009 at 13:51

Ben Scheirman

41.1k21 gold badges104 silver badges139 bronze badges

2 Comments

usoban Over a year ago

It's possible, but it would be very strange.

tvgemert Over a year ago

My bad, the code is perfect like this but my css wasn't right for the other three classes. I stared myself blind on this because the first tab functioned. Thanks all for your efforts it really helped a lot.

usoban · Accepted Answer · 2009-07-09 13:38:25Z

-1

Try $(".branche"+sId).addClass('active');

answered Jul 9, 2009 at 13:38

usoban

5,47830 silver badges42 bronze badges

Comments

Posto · Accepted Answer · 2009-07-09 14:02:04Z

-1

I think only problem is in

 <p>
 <span class="branche1">ADFSDFSDF</span> 
<span class="branche1">IUYIUYIU</span> 
<span class="branche1">CVCBVCV</span> 
<span class="branche4">MNBBMNBMB</span>

section , where class="branche1" repeted 3 times

and I Have only modified this part :

<p>
<span class="branche1">ADFSDFSDF</span> 
<span class="branche2">IUYIUYIU</span> 
<span class="branche3">CVCBVCV</span> 
<span class="branche4">MNBBMNBMB</span>

only and its working fine .

edited Jul 9, 2009 at 14:02

answered Jul 9, 2009 at 13:46

Posto

7,5908 gold badges48 silver badges63 bronze badges

2 Comments

tvgemert Over a year ago

Yeah ok, but what is the problem with that?

Posto Over a year ago

"This works for me only for the first element (1). The rest gives no result (also no error)" and class="branche1" repeated 3 times so , only takes effect by this code $('span.branche'+sId).addClass('active');

Collectives™ on Stack Overflow

jQuery addClass question

5 Answers 5

1 Comment

1 Comment

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related