Javascript jQuery：当使用相同的类名时，将div放在其他类名之前

我有几个具有相同类名的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>

bla-bla
blo blo
bli bli

在导航菜单中也有这三个链接，用于将相关div置于其他div之前：

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

---

问题：什么jQuery代码允许我根据单击的链接将特定div定位在其余div之上？创建包装div并使用

$（选择器）。追加（…）

。因此，首先，您可以给

标记一个

id

。基于该

id

您可以调用

$（#[a tag id]）。单击（function（）{put div append here…}

这就是您要查找的吗

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

---

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

如果所有3个元素都是

float:none；

您可以使用

$（“#一些#div”）.css（“float”，“left”）

这将把它推到第一位。

看。我认为它工作正常

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

布拉布拉
blo blo
bli bli
$（#导航a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$container=$（“.container”）
target=$（this.data（'target'）；
$div=$（目标）
$container.prepend（$div）；
});

---

希望这有帮助。

您想根据单击的内容更改元素的顺序吗？是。每个onlick链接都应该将相应的div放在其他div的顶部（之前）。使用

event.preventDefault（）

Good catch。或者，使用href be“javascript:；”。不，我需要重新定位内容，因为它们总是可见的。很抱歉，代码不起作用：元素被添加了多次。@Antwerp，您仍然看到它被添加了多次吗？它们是设置为display:block的divs；是的。问题是缺少父容器。我真的不想创建一个，但它确实很容易解决了问题.

$('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());
});

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