Question

我有几个具有相同类名的div：

<div class="cont" id="cont-a">bla bla</div>
<div class="cont" id="cont-b">blo blo</div>
<div class="cont" id="cont-c">bli bli</div>

在导航菜单中还有这三个链接，它们应该将相关的div放在其他div之前：

<a href="#">Show bla bla</a>
<a href="#">Show blo blo</a>
<a href="#">Show bli bli</a>

问题：jQuery代码允许我根据点击的链接将特定div放在其余部分之上？

Answer 1

创建一个包装器div并使用$(selector).append(...)。首先，您可以为<a>代码添加id。根据{{1}}，您可以拨打id。

Answer 2

这是你在找什么？

<div>
    <div class="cont" id="cont-a">bla bla</div>
    <div class="cont" id="cont-b">blo blo</div>
    <div class="cont" id="cont-c">bli bli</div>
</div>

更改链接以包含一些标识符：

<a href="#" data-target="#cont-a">Show bla bla</a>
<a href="#" data-target="#cont-b">Show blo blo</a>
<a href="#" data-target="#cont-c">Show bli bli</a>

然后你可以这样做......

$('a').on('click', function(event) {
    event.preventDefault();
    $('div.cont.cloned').remove();
    $('div.cont').show();
    var target = $($(this).attr('data-target')),
        clone = target.clone();
    target.hide();
    clone.addClass('cloned');
    clone.prependTo($('div.cont').parent());
});

编辑这应该可以正常工作，并且它会保持相同的顺序（除了“移动”到前面的那个）。

Answer 3

如果所有3个元素都是float:none;，您可以使用$("#some_div").css("float","left");

这将把它推到第一位。

Answer 4

见this jsfiddle。我认为它按预期工作。

<div id='nav' >
  <a href="#" data-target='#cont-a' >Show bla bla</a>
  <a href="#" data-target='#cont-b' >Show blo blo</a>
  <a href="#" data-target='#cont-c' >Show bli bli</a>    
</div>

<div class="container" >
  <div class="cont" id="cont-a">bla bla</div>
  <div class="cont" id="cont-b">blo blo</div>
  <div class="cont" id="cont-c">bli bli</div>
</div>

$('#nav a').on('click', function(e) {
    e.preventDefault();
    $container = $('.container')
    target = $(this).data('target');
    $div = $(target)

    $container.prepend($div);
});

希望这有帮助。

jQuery：当使用相同的类名时，在其他人之前定位div

4 个答案: