Get class of an element selected by its other class

Question

I have an element which has two classes, and I want to get the class that wasn't used as a selector for this element. Exemple:

<div class="something anything"></div>

$(".something").attr("class");//Should return "anything"
$(".anything").attr("class");//Should return "something"

I am aware that .attr("class") returns "something anything", it was just for the exemple.

I have made searches on SO to find an answer, like this one, but I cannot use an index to find the "other" class, because the one I need to retrieve may be the first one, or the second one. My element will never have more than two classes.

All notices appreciated to help me handle this. Thanks.

You would need to get the `class` attribute's value, split it by space, then remove the item in the array that matches the selector you don't want. — Rory McCrossan, Oct 01 '15 at 08:07
What exactly are you trying to achieve? On second reading this sounds like an XY problem. — Rory McCrossan, Oct 01 '15 at 08:13
Thanks for your help, there are already a lot of useful answers (before I was able to explain a bit more). — EdenSource, Oct 01 '15 at 08:28

score 2 · Accepted Answer · answered Oct 01 '15 at 08:12

You will need to do it in 2 steps. 1) Get the class attribute 2) then replace the class used as selector.

You can do it like

function getOtherClass(clazz) {
  var classes = $('.' + clazz).attr('class');
  var regex = new RegExp('\\b' + clazz + '\\b');
  return classes.replace(regex, '');
}

snippet.log(getOtherClass('something'));
snippet.log(getOtherClass('anything'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<div class="something anything"></div>

Thank you for your help. That's exactly what I was waiting for. — EdenSource, Oct 01 '15 at 08:36

Neel · Answer 2 · 2015-10-01T08:25:20.733

1

You can get it as below:

var result = $('.something').attr('class').split(' ');

for(var i =0; i < result.length; i++)
{
    if(result[i] != "something")
  {
      alert(result[i]);
     //// yu can get your value here.
  }

}

Demo: http://jsfiddle.net/Rj9bR/67/

edited Oct 01 '15 at 08:25

answered Oct 01 '15 at 08:09

Neel

11,625
3
43
61

This solution is what I was expecting for, unfortunately, I can only accept one answer. Thanks for helping. – EdenSource Oct 01 '15 at 08:32
i can understand. Anyways glad to help! :) @EdenSource – Neel Oct 01 '15 at 08:34

score 1 · Answer 3 · answered Oct 01 '15 at 08:16

1

I think this is the easiest way (if there are always two classes):

function getClass (clsName) {
  var classes = $("."+clsName).attr("class").split(" ");
  
  return (classes[0] == clsName) ? classes[1] : classes[0];
}

var cls = "something";
console.log(getClass(cls));

cls = "anything";
console.log(getClass(cls));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="something anything"></div>

answered Oct 01 '15 at 08:16

Aleksei Golubev

342
3
11

This solution is what I was expecting for, unfortunately, I can only accept one answer. Thanks for helping. – EdenSource Oct 01 '15 at 08:36

score 1 · Answer 4 · answered Oct 01 '15 at 08:18

1

Define a method to ease your need,like

function GetClass(elemClass)
{
  var temp= $("." + elemClass).attr("class");
  temp=temp.Replace(elemClass,"").trim();
  return temp; //here you will have the classes you need
}

The above logic works great for 2 classes as your problem states but for many classes you just need to conver them to array and remove the given glass, it wont take much overhead from here to do so.

answered Oct 01 '15 at 08:18

Shekhar Pankaj

9,065
3
28
46

This solution is what I was expecting for, unfortunately, I can only accept one answer. Thanks for helping. – EdenSource Oct 01 '15 at 08:31

score 1 · Answer 5 · answered Oct 01 '15 at 08:22

1

Here is another easy solution

var myclass = $(".something").attr("class").replace("something","");
myclass = $.trim(myclass);  //remove empty space
  
  alert(myclass);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="something anything"></div>

answered Oct 01 '15 at 08:22

Luthando Ntsekwa

4,192
6
23
52

This one is working well, short, but less flexible than others (to my opinion). Thanks for helping – EdenSource Oct 01 '15 at 08:30
@EdenSource thanks, this was just an example, you can create a function and pass your classes as variable, I was just giving you an idea. – Luthando Ntsekwa Oct 01 '15 at 08:40

Get class of an element selected by its other class

5 Answers5