jquery- how to define specific variable class for element have multiple classes

Question

I have elements and each element have multiple classes, and I want to define each of these classes to use in jquery..

to explain.. this is the code: http://jsfiddle.net/wUWYs/2/

HTML:

<div class="red row4 col1"></div>
<div class="red row3 col2"></div>
<div class="red row2 col3"></div>
<div class="red row1 col4"></div>

<div class="blue row1 col1"></div>
<div class="blue row2 col2"></div>
<div class="blue row3 col3"></div>
<div class="blue row4 col4"></div>

and this is what I tried to do with jquery:

jQuery:

$(".red").each(function(){
    var colNumber = $(this).attr("class");
    $(this).hover(
        function(){$(".blue."+colNumber).show();},
        function(){$(".blue").hide();}
    );
});

the main problem that I want when hover red element who have col1 and row4 classes, then the two blue elements will shown, who have col1 and who have row4 ..

problem here:

var colNumber = $(this).attr("class");

how can I define the specific class, and how to make the number variable?

Milind Anantwar · Accepted Answer · 2014-06-10 05:29:44Z

2

Use index property instead:

$(this).hover(
    function(){$(".blue:eq("+$(this).index()+")").show();},
    function(){$(".blue").hide();}
);

Working Demo

answered Jun 10, 2014 at 5:29

Milind Anantwar

82.3k26 gold badges97 silver badges128 bronze badges

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

1 Comment

Ahmad Seraj Eddin Over a year ago

thanx, but what i meant that when you hover red col1 row4, then two blue elements will appear: who have ".col1" and who have ".row4"

King King · Accepted Answer · 2014-06-10 06:21:45Z

1

Here is my try:

$(".blue").hide();
var getClass = function(target){
  return $.map(target.className
                     .split(' '), function(e){                           
                       return e == 'red' ? null : '.blue.' + e;
                    }).join(', ');
};
$(".red").hover(function(e){       
    $(getClass(e.target)).show();
 }, function(e){
    $(getClass(e.target)).hide();
});

Demo.

The idea is simple, you just need to get the className of the hovered red div, remove the "red", trim it, split by space to get array of other classes, such as ["col1", "row4"], then you just join it to make the string such as ".blue.col1, .blue.row4" and use this string as the selector to select the blue divs.

edited Jun 10, 2014 at 6:21

answered Jun 10, 2014 at 5:58

King King

63.5k16 gold badges118 silver badges140 bronze badges

5 Comments

Ahmad Seraj Eddin Over a year ago

Great! can you explain what you did?

King King Over a year ago

@Ahmad see my update, it's simple. Also there are some other solutions but I think this is the simplest one. You may want to find more about the jQuery method $.map().

King King Over a year ago

@Ahmad see my updated demo, the previous demo has a bug, it works only if you specify the red as the first class, like in "red col1 row1", if it is "col1 red row1", the demo won't work. The updated demo works perfectly.

Ahmad Seraj Eddin Over a year ago

thanks @King King, I will read about $.map(), but I have a small relative question: If i have div.row1, div.row2, div.row3... and i want to select all of them, is there a shortcut to refer to variable numbers? something like ("row[*]") maybe ?!

King King Over a year ago

@Ahmad we don't have any pure CSS selector supporting that requirement, there is only a similar selector called attribute selector, but I think it's not suitable in this case (you can do something like div[class^=row], but it's not exact, such as it can match divs with class='rowL'. You should use the filter method to filter for the matched elements. Check this demo to understand it more. Note that I used RegExp here, it's an essential part of Javascript, you should read about it, it's very helpful in searching, filtering, replacing,...

user229044 · Accepted Answer · 2014-06-10 14:25:40Z

0

Not use jQuery, you view this example

 .red.col1:hover ~ .col1{
    display:block !important;
   }
 .red.col2:hover ~ .col2{
      display:block !important;
  }
.red.col3:hover ~ .col3{
   display:block !important;
}
.red.col4:hover ~ .col4{
   display:block !important;
 }
 ![enter image description here][1]

http://jsfiddle.net/kisspa/cfeSy/

edited Jun 10, 2014 at 14:25

user229044♦

241k41 gold badges347 silver badges350 bronze badges

answered Jun 10, 2014 at 5:43

Kisspa

5844 silver badges11 bronze badges

3 Comments

Ahmad Seraj Eddin Over a year ago

nice solution, but my original code is more complex than using only hover action, beside the main problem still exist:)

Kisspa Over a year ago

do you think my answer false

Ahmad Seraj Eddin Over a year ago

sorry, your answer is correct, but what I want is " how to define specific variable class for element have multiple classes".. The original code in the My Page not that simple, it uses several tasks depend on this partial specifically and not just using CSS. However, thanks for your answer again.

Collectives™ on Stack Overflow

jquery- how to define specific variable class for element have multiple classes

3 Answers 3

1 Comment

Demo.

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related