Question

I have 2 main div’s. Group1 and group2. Those group divs contain other 2 (or more) div each. All the div’s inside the group’s have a class of .grp_item. Now grp_item is display:none and only one div in each group has a class .sel which is display:block .

How can I swap the class .sel between the groups ? Div’s inside the groups are the same between them.

Here is the structure:

<div id="group1">
    <div class="grp_item">
        <div>
        Div First
        </div>
    </div>
    <div class="grp_item sel">
        <div>
        Div second
        </div>
    </div>
</div>

<div><button id="swap">SWAP</button></div>

<div id="group2">
    <div class="grp_item sel">
        <div>
        Div First
        </div>
    </div>
    <div class="grp_item">
        <div>
        Div Two
        </div>
    </div>
</div>

So for this example, when swap button pressed, set .sel in group one to the first Div and in group2 set .sel to Div Two.

Here is the fiddle of the structure: http://jsfiddle.net/d6TFh/

Note that I can’t add any more classes in the inner div’s so I would imagine I should be first setting the classes to each and then removing them.

Is this possible using .contain() or any other way?

Answer 1

Based on your conversation with Ayman Safadi I think this is what you are looking for:

var a = $('#anything .sel').attr('id')
var b = $('#something .sel').attr('id')

$('#anything .sel').removeClass('sel')
$('#anything').find('#' + b).addClass('sel');

$('#something .sel').removeClass('sel')
$('#something').find('#' + a).addClass('sel');

And the jsFiddle: http://jsfiddle.net/d6TFh/10/