将项目移到开头

Question

我写了一个元素列表，可以选择html收音机。我希望将选择该字段的div移到列表的最开始（列表的所有元素上方）。你知道我该怎么做吗？

我的html代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="elements">
  <div class="element">
    <span>Option 1</span>
    <input type="radio" name="var" value="1">
  </div>
  <div class="element">
    <span>Option 2</span>
    <input type="radio" name="var" value="2">
  </div>
  <div class="element">
    <span>Option 3</span>
    <input type="radio" name="var" value="3">
  </div>
</form>

Answer 1

$('.elements .element input[type=radio]').change(function() {
  $(this).closest('.element').prependTo('.elements');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="elements">
  <div class="element">
    <span>Option 1</span>
    <input type="radio" name="var" value="1">
  </div>
  <div class="element">
    <span>Option 2</span>
    <input type="radio" name="var" value="2">
  </div>
  <div class="element">
    <span>Option 3</span>
    <input type="radio" name="var" value="3">
  </div>
</form>

Answer 2

因此仅靠CSS不能完全做到这一点。在CSS4 :has selector删除之前，我们仍然必须使用javascript根据父级的子级设置样式。

但是我们可以使用flexbox to reorder元素（而不是删除它们并重新添加它们，这会导致保存元素状态的问题）：

const options = document.getElementById('options')

options.addEventListener('click', (event) => {
  const elements = Array.prototype.slice.call(event.currentTarget.querySelectorAll('.element'))
  elements.forEach(element => element.classList.remove('selected'))
  event.target.closest('.element').classList.add('selected')
})

#options {
    display: flex;
    flex-flow: column nowrap;
}

.element {
    border: 1px solid #ace;
    order: 1;
}

.element.selected {
    border: 1px dotted #ace;
    order: 0;
}

<form id="options">
  <div class="element">
    <label>Option 1
        <input type="radio" name="var" value="1">
    </label>
  </div>
  <div class="element">
    <label>Option 2
      <input type="radio" name="var" value="2">
    </label>
  </div>
  <div class="element">
    <label>Option 3
      <input type="radio" name="var" value="3">
    </label>
  </div>
</form>

Answer 3

$(function () {
        $('input[type=radio][name=var]').change(function () {
        var divClassElement = $("span:contains('Option " + this.value + "')").parent();
        divClassElement.prependTo($(".elements"));
    });
})

Answer 4

附加选定的项目，然后将其从列表中删除

删除：https://api.jquery.com/remove/ 附加：http://api.jquery.com/append/