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, Jan 11 '13 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, Jan 11 '13 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, Jan 11 '13 at 22:32
@Swordfish0321, sorry I forgot to mention this. I updated the question. — Andre Zimpel, Jan 11 '13 at 22:36
possible duplicate of [jQuery Partial Selectors](http://stackoverflow.com/questions/1368591/jquery-partial-selectors) — Travis J, Jan 11 '13 at 22:53

score 2 · Accepted Answer · answered Jan 11 '13 at 22:38

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));

Travis J · Answer 2 · 2013-01-11T22:41:45.727

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 '13 at 22:41

answered Jan 11 '13 at 22:27

Travis J

81,153
41
202
273

1

He doesn't say so, but I assume the number is always different, and he probably doesn't have it. – Leeish Jan 11 '13 at 22:29
Yen, the number is always different – Andre Zimpel Jan 11 '13 at 22:44
@AndreZimpel - So you should go with the example which implements a partial match. – Travis J Jan 11 '13 at 22:45
@Travis J - Yep, Shmiddty's solution works. But thank you anyway! :) – Andre Zimpel Jan 11 '13 at 22:47
@AndreZimpel - I take it you did not read the section I posted "If you do not have the number". – Travis J Jan 11 '13 at 22:48
@Travis J - I did read it. But I forgot to describe my Goal, which I did in the **EDIT:** section. Thank's for your help! :) – Andre Zimpel Jan 11 '13 at 22:51

score 0 · Answer 3 · answered Jan 11 '13 at 22:29

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 '13 at 22:29

Mike Brant

70,514
10
99
103

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

3 Answers3