javascript - 在 div 之间交换类

Question

我有 2 个主要 div。组 1 和组 2。这些组 div 每个包含其他 2 个(或更多)div。该组内的所有 div 都有一个 .grp_item 类。现在 grp_item 是 display:none 并且每组中只有一个 div 有一个 .sel 类，它是 display:block 。

如何在组之间交换类 .sel ？组内的 Div 之间是相同的。

结构如下:

<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>

因此，对于此示例，当按下交换按钮时，将第一个组中的 .sel 设置为第一个 Div，将第 2 组中的 .sel 设置为第二个 Div。

这是结构的 fiddle :http://jsfiddle.net/d6TFh/

请注意，我无法在内部 div 中添加更多类，因此我想我应该首先为每个类设置类，然后删除它们。

使用.contain()或任何其他方式可以实现这一点吗？

Answer 1

试试这个:http://jsfiddle.net/d6TFh/3/

$("button").on("click", function () {
    $('div[id^="group"] > div').toggleClass('sel')
});