Question

下面是我当前的html布局，在我的.container课程中我有两个<span>标签，其中.download-btn和.save-btn类。我希望，无论何时加载网页，都会从那里删除<span>并在<div class="share"></div>附近找到位置标签

当前布局

<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>

<div id="options">
<div class="share"></div>
</div>

页面加载时的预期布局

<div class="container">
<div class="col-md-6 col-center">
</div>

<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>

</div>

请告知如何继续使用js？

Answer 1

使用jQuery，
它可以在一行代码中完成。

$("#options").prepend($(".save-btn")).prepend($(".download-btn"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">

  <div class="col-md-6 col-center">
    <span class="download-btn">download</span>
    <span class="save-btn">save</span>
  </div>

  <div id="options">
    <div class="share"></div>
  </div>
  
</div>

Answer 2

使用prepend()将按钮移动到ID为options的元素的开头：

$('#options').prepend($('.download-btn, .save-btn'));

Answer 3

在这个示例中，我将从他们的位置删除这两个按钮，并在div之前附加它们（我已将内容“share”添加到此var downloadBtn = $('.download-btn'); var saveBtn = $('.save-btn'); $('.share').before(saveBtn).before(downloadBtn);以查看差异）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>

<div id="options">
<div class="share">share</div>
</div>

undefined

Answer 4

使用button表示按钮。它在语义上是正确的和可访问的。

$(window).on('load', function() {
  var download = $('.download-btn'),
      save = $('.save-btn'),
      options = $('#options');
      
  download.remove();
  save.remove();
  options.prepend(download, save);
});

.container {
  border: .1rem solid red;
  min-height: 5rem;
  margin-bottom: 1rem;
}

#options {
  border: .1rem solid blue;
  min-height: 100px;
}

button {
  padding: 1rem;
  background-color: #ddd;
  display: inline-block;
  margin: .5rem;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="col-md-6 col-center">
    <button class="download-btn">download</button>
    <button class="save-btn">save</button>
  </div>
</div>

<div id="options">
  <div class="share"></div>
</div>

使用jquery将div类定位在另一个div旁边

当前布局

页面加载时的预期布局

4 个答案: