Question

我有列表，每个列表都有“移至顶部”按钮。单击“移至顶部”按钮时，div元素应移至顶部（在DOM中）。

但是我可以轻松做到这一点。

此外，在按键盘上的Tab键并按Enter键时，在按Enter键之后，焦点必须保持在按钮上。

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

$('.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()上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>

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

1 个答案: