Question

I would like to add a class named “group” to all elements which have the class “someClass” – but only , e.g.:

<div class="someClass">SomeText</div>
<div class="someClass">SomeOtherText</div>
<div class="someOtherClass">SomeMoreText</div>
<div class="someOtherClass">SomeMoreOtherText</div>

Should become to the following if user clicks on a div containing the class “someClass”:

<div class="someClass group">SomeText</div>
<div class="someClass group">SomeOtherText</div>
<div class="someOtherClass">SomeMoreText</div>
<div class="someOtherClass">SomeMoreOtherText</div>

If the user clicks on a div containing “someOtherClass” those should get added the class “group”.

I tried the following jQuery – unsuccessfully:

$("#someId").live("click", function() {    
    var selectedClass;
    selectedClass = $(this).attr('class');

    $('.'+selectedClass).addClass('group');
    //...followed by more jQuery...
});

I also tried my luck with:

$("#someId").live("click", function() {    
    $(this).attr('class').addClass('group');
    //...followed by more jQuery...
});

…which didn’t work either 🙁

Answer 1

You ought to take into account the possibility of divs having more than one class — which will happen whenever a div is clicked twice in a row:

​$('div').on('click',function(e) {
    var cl = $(this).attr('class'),
        carr = cl.split(/\s+/);
    for (var i=0; i<carr.length; i++) {
        $('div.'+carr[i]).addClass('newclass');
    };
});​​​​​

http://jsfiddle.net/FcXu5/