在 div 之间交换类

发布于 2024-12-22 04:34:39 字数 1194 浏览 1 评论 0原文

我有 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。

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

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

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

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

迟月 2024-12-29 04:34:39

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

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

Try this: http://jsfiddle.net/d6TFh/3/

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

回复收藏 0 原文

关于从前 2024-12-29 04:34:39

根据您与 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/

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/

回复收藏 0 原文

~没有更多了~