Get a (half)-dynamic css-class with jQuery

Question

I'm kinda stuck right now. I need to get a certain class from an element. The class attribute could look like:

<div class="span12 display">

or:

<div class="span24 overview overview-small">

So the span* is always the same just the number can differ.

I really don't know how to get the span* everytime using jQuery.

EDIT: My goal is to change the size of the element. e.g. from span12 to span18. It is possible that I need to change the size from span10 to span18 or from span8 to span18. That's why I'd prefer a generic solution.

So the number is quite random. And it's very important to know the span-number before changing it to span18 because it should be possible to change the previous size (span).

Sorry that I forgot to mention this. :|

Adding a new attribute would work or giving all of those divs a related class. However a custom attribute would be best. — Leeish
– Leeish, Commented Jan 11, 2013 at 22:28
@Shmiddty - the span12 refers to the Bootstrap "span12". Setting a data-span="12" would be a workaround for me. But Thank you for the suggestion! — Andre Zimpel
– Andre Zimpel, Commented Jan 11, 2013 at 22:31
What do you mean by "get" a span? What are you actually trying to do here? That could mean a lot of things... — Scott Sword
– Scott Sword, Commented Jan 11, 2013 at 22:32

Shmiddty · Accepted Answer · 2013-01-11 22:38:58Z

2

Simple string parsing can get it for you: http://jsfiddle.net/7sXFb/

$("div[class*=span]").each(function(){
  var cls = this.className,
      prt = cls.split(" "),
      spn = 0;

  for (var i = 0; i < prt.length; i++){
    if (prt[i].indexOf("span") > -1)
      spn = +prt[i].replace("span","");
  }

  console.log(spn);
});

You can add 10 like this:

this.className = this.className.replace("span" + spn, "span" + (spn+10));

Or, like so:

$(this).removeClass("span" + spn).addClass("span" + (spn+10));

answered Jan 11, 2013 at 22:38

Shmiddty

13.9k1 gold badge38 silver badges52 bronze badges

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

Comments

Travis J · Accepted Answer · 2013-01-11 22:41:45Z

1

If you have the number, it shouldn't be that hard.

var spanNumber = 15;
var spanSelector = ".span"+spanNumber;
var spanClassName = $(spanSelector)[0].className;

If you do not have the number, then you can look for a partial match and then do something with that group

var spans = $('div[class*=span]');

Perhaps iterate them:

demo: http://jsfiddle.net/hFx26/

spans.each(function(index,element){
 var spanClass = element.className;
 var tar = spanClass.indexOf("span");
 var number = "";
 for( var i = (tar + 4); i < spanClass.length; i++ ){
  if( spanClass[i] == " " ) break;
  number += spanClass[i].toString();
 }
 number = parseInt(number);
 //call some function with number, element, or replace the className
});

edited Jan 11, 2013 at 22:41

answered Jan 11, 2013 at 22:27

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

6 Comments

Leeish Over a year ago

He doesn't say so, but I assume the number is always different, and he probably doesn't have it.

Andre Zimpel Over a year ago

Yen, the number is always different

Travis J Over a year ago

@AndreZimpel - So you should go with the example which implements a partial match.

Andre Zimpel Over a year ago

@Travis J - Yep, Shmiddty's solution works. But thank you anyway! :)

Travis J Over a year ago

@AndreZimpel - I take it you did not read the section I posted "If you do not have the number".

|

Mike Brant · Accepted Answer · 2013-01-11 22:29:36Z

0

You could simply add another class like allspans to each element that has a span* value and use that as the selector.

answered Jan 11, 2013 at 22:29

Mike Brant

71.4k10 gold badges102 silver badges104 bronze badges

Collectives™ on Stack Overflow

Get a (half)-dynamic css-class with jQuery

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related