Question

我有2个div，名称与下面相同（不幸的是我无法重命名div）。

如何切换2'nav'div，以便第一个显示在另一个上方？

示例：

<div class="main">
   <div class="nav"> ... </div>
   <div class="nav"> ... </div>
</div>

只是想知道，这是通过CMS组合在一起的 - 所以我必须使用相同的类名导航。但我希望第一个（div）出现在第二个之前。

CSS或jQuery ......

Answer 1

您可以使用CSS选择它们：

/* first .nav */
.main .nav:first-child { ... }
.main .nav:nth-child(1) { ... }

/* second .nav */
.main .nav:nth-child(2) { ... }
.main .nav:last-child { .. } /* will select the LAST .nav */

编辑基于您的评论。

使用.nav隐藏第二个display: none，然后创建这个jQuery函数（请注意我不是jQuery英雄）：

$(".swapIt").click(function() {
    if( $(".main .nav:nth-child(1)").is(":visible") ) {
        $(".main .nav:nth-child(1)").hide();
        $(".main .nav:nth-child(2)").show();
    }
    else {
        $(".main .nav:nth-child(2)").hide();
        $(".main .nav:nth-child(1)").show();        
    }
});

Live demo

Answer 2

你想要这样demo

$('.main .nav:first-child').appendTo('.main');

Answer 3

您可以使用.first()选择器：

$( ".main" ).first().css( "z-index", "1000" );

Answer 4

你可以试试这个：

$('.main .nav:eq(0)').before($('.main .nav:eq(1)'));

Answer 5

可以选择带有类nav的第一个div，如下所示：

$( ".main .nav" ).first();

DEMO

切换div的同名css jquery

5 个答案: