Question

我有两个主要的div。 Group1和group2。这些组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，将第二组中的.sel设置为第二个。

以下是结构的小提琴：http://jsfiddle.net/d6TFh/

请注意，我不能在内部div中添加更多类，所以我想我应该首先将类设置为每个类然后删除它们。

这可以使用.contain()或其他方式吗？

Answer 1

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

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

Answer 2

根据您与Ayman Safadi的对话，我认为这就是您所寻找的：

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');

和jsFiddle：http://jsfiddle.net/d6TFh/10/

在div之间交换类

2 个答案: