CODEWITHSUNDEEP
javascriptjquerydry
Dave Hogan
Dave Hogan

Reputation: 3221

jQuery add class if it exists elsewhere

I've just wrote the code below to add a class to the outer div where it matches. Now I know there must be a more elegant way to achieve the below!

if ($(".cur").hasClass("one")) { $("#outer").addClass("one"); }
if ($(".cur").hasClass("two")) { $("#outer").addClass("two"); }
if ($(".cur").hasClass("three")) { $("#outer").addClass("three"); }
if ($(".cur").hasClass("four")) { $("#outer").addClass("four"); }
if ($(".cur").hasClass("five")) { $("#outer").addClass("five"); }
if ($(".cur").hasClass("six")) { $("#outer").addClass("six"); }

Any improvements will be gladly received :)

Upvotes: 0

Views: 346

Answers (5)

gdoron
gdoron

Reputation: 150253

var classNames = '';    
$('.cur').each(function(){
    if (classNames.indexOf(this.className + ' ') === -1)
        classNames += this.className + ' ';
});

var classes = classNames.split​(" ");​​​
var $outer = $('#outer');    
$.each(classes, function(index, value){
    if (value !== 'cur')  
        $outer.addClass(value);
});

Live DEMO

Notes:

  • With this code you don't need to "burn" the classes of .cur in the code, it's done automatically.
  • It will copy all the classes of .cur (except cur itself), so it's up to you to decide if it's good for you or not.

Upvotes: 2

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79830

You can find the matching class using regEx and then add the matching class to #outer. See below,

$(function () {
    var regClasses = /(one|two|three|four|five|six)/g;
    var $cur = $('.cur'),
        $outer = $('#outer');

    $cur.each(function () {        
        $outer.addClass(this.className.match(regClasses).join(' '));
    });
});

DEMO

Upvotes: 2

greggreg
greggreg

Reputation: 12085

This should be faster as it doesn't call .hasClass on every iteration:

// define which classes you want to match
match_classes = ["one", "two", "three", "four"];
// grab all the classes on the inner element
elm_classes = $(".cur").attr("class").split(" ");
// cache the outer element for quick access
$outer = $("#outer");

// iterate over the list of classes you want to match
$.each(match_classes, function(i, val){
// if one of those classes exists on inner, add it to outer
  if(elm_classes.indexOf(val) > -1) $outer.addClass(val);
});

Upvotes: 1

zerkms
zerkms

Reputation: 254896

How about this:

var classes = ['one', 'two', 'three'],
    $cur = $('.cur'),
    $outer = $("#outer");

$.each(classes, function(i, v) {
    if ($cur.hasClass(v)) $outer.addClass(v); 
})

or iteration can be implemented as pure js like:

for (var i in classes) {
    var v = classes[i];
    ....
}

or (better) use for instead:

var len = classes.length;
for (var i = 0; i < len; i++) {
    var v = classes[i];
}

Upvotes: 1

user1320842
user1320842

Reputation: 

var classes = ['one', 'two', 'three', 'four', 'five', 'six'];
$.each(classes, function(key, value){
    if($('.cur').hasClass(value)) $('.cur').closest('div').addClass(value); 
});

Should do the trick, it uses closest('div') to get the outer div.

Upvotes: 0

Related Questions