单击每个按钮时将元素移动到顶部

Question

我有列表，每个列表都有“移动顶部”按钮。当单击“移动顶部”按钮时，div元素应该移动到顶部(在DOM中)。

但我没什么麻烦去做。

另外，当使用键盘选项卡到按钮并按回车键时，焦点必须保持在按钮上，然后按下键盘输入。

这就是我到目前为止在这里尝试过的--请帮帮忙。

​

$('.btnTop').on('click', function() {
  $(this).parent().prepend(this).focus();
});

.box {
  border: 1px solid #000;
  margin: 0 0 20px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap"> 
  <div id="aa" class="box">
    aa <button class="btnTop">Top</button>
  </div> 
  <div id="bb" class="box">
    bb <button class="btnTop">Top</button>
  </div> 
  <div id="cc" class="box">
    cc <button class="btnTop">Top</button>
  </div> 
</div>

​

Answer 1

你把错误的项目列在前面。您需要预置按钮的父div，而不是按钮本身。另外，您还需要添加到.wrap div，它是按钮的parent parent，而不是按钮的父级，它只是包装按钮的div。

最后，您需要focus() on this (您单击的按钮)才能使选项卡按钮正常工作。此刻，你没有专注于你点击的按钮。

见下面的工作示例：

​

$('.btnTop').on('click', function() {
  let this_div = $(this).parent();
  this_div.parent().prepend(this_div);
  $(this).focus();
}); 

.box {
  border: 1px solid #000;
  margin: 0 0 20px 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap"> 
  <div id="aa" class="box">
    aa <button class="btnTop">Top</button>
  </div> 
  <div id="bb" class="box">
    bb <button class="btnTop">Top</button>
  </div> 
  <div id="cc" class="box">
    cc <button class="btnTop">Top</button>
  </div> 
</div>

​