Question

我现在在js领域中拥有的东西，实际上并没有做什么。

$(".blocks .block").on('click', function() {
    $(this).parent().hide().prependTo(".blocks").slideDown()
});

我正在尝试使用DOM添加一个事件，当单击一个块时，该事件将移动到其他块的顶部。我已经尝试过.prependTo（）和.position（）。我似乎没什么用，有人可以帮忙吗？

body {
  display: flex;
  /*justify-content: center;*/
}

.blocks {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
}

.block {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.block--red {
  background-color: red;
}

.block--blue {
  background-color: blue;
}

.block--green {
  background-color: green;
}

.block--pink {
  background-color: pink;
}

.block--gray {
  background-color: gray;
}

    <div class="blocks">
      <div class="block block--red"></div>
      <div class="block block--blue"></div>
      <div class="block block--green"></div>
      <div class="block block--pink"></div>
      <div class="block block--gray"></div>
    </div>

Answer 1

$(".block").on('click', function(event){
    $(".blocks").prepend($(this))
 
});

body {
  display: flex;
  /*justify-content: center;*/
}

.blocks {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
}

.block {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.block--red {
  background-color: red;
}

.block--blue {
  background-color: blue;
}

.block--green {
  background-color: green;
}

.block--pink {
  background-color: pink;
}

.block--gray {
  background-color: gray;
}

<div class="blocks">
      <div class="block block--red"></div>
      <div class="block block--blue"></div>
      <div class="block block--green"></div>
      <div class="block block--pink"></div>
      <div class="block block--gray"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 2

prependTo为此很好！

您的代码不起作用，因为使用prependTo()时，您应该将child.prependTo(parent)相对于prepend()，而您应该将parent.prepend(child)（reference 。看来您在$(this).parent()之前是.blocks。

$(".block").click(function(){
    $(this).prependTo(".blocks");
});

body {
  display: flex;
  /*justify-content: center;*/
}

.blocks {
  margin-top: 5%;
  display: flex;
  flex-direction: column;
}

.block {
  width: 100px;
  height: 100px;
  margin: 10px;
}

.block--red {
  background-color: red;
}

.block--blue {
  background-color: blue;
}

.block--green {
  background-color: green;
}

.block--pink {
  background-color: pink;
}

.block--gray {
  background-color: gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="blocks">
      <div class="block block--red"></div>
      <div class="block block--blue"></div>
      <div class="block block--green"></div>
      <div class="block block--pink"></div>
      <div class="block block--gray"></div>
</div>

单击事件后如何使用jQuery将div移至顶部

2 个答案: