Как переместить div в верхнюю часть своего родителя при проверке флажка?

Question

Как переместить div в верхнюю часть своего родителя при проверке флажка?

Как я могу сделать <div>переход в начало внутри родителя <div>на основе отмеченного флажка? Т.е. если флажок $ ( "# player-list input [type = checkbox] .oncourt" ). live ( 'click' , function () { $ ( this ). parent (). prependTo ( "# player-list" ) }); проверяется, переместите строку вверх.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="player-list">
    <div class="row">
        <div id=1><input type="checkbox" class="oncourt"> ROW 1</div>
    </div>
    <div class="row">
        <div id=2><input type="checkbox" class="oncourt"> ROW 2</div>
    </div>
    <div class="row">
        <div id=3><input type="checkbox" class="oncourt"> ROW 3</div>
    </div>
    <div class="row">
        <div id=4><input type="checkbox" class="oncourt"> ROW 4</div>
    </div>
    <div class="row">
        <div id=5><input type="checkbox" class="oncourt"> ROW 5</div>
    </div>
    <div class="row">
        <div id=6><input type="checkbox" class="oncourt"> ROW 6</div>
    </div>
    <div class="row">
        <div id=7><input type="checkbox" class="oncourt"> ROW 7</div>
    </div>
    <div class="row">
        <div id=8><input type="checkbox" class="oncourt"> ROW 8</div>
    </div>
</div>

display: flex;

javascript,jquery,html,checkbox,

0

Ответов: 2

JavaScript, JQuery, HTML, флажок,

Похожие вопросы

score 0 · Accepted Answer

0 принят

С помощью order: -1;вы можете изменить порядок элементов. Таким образом, вы можете добавить и удалить класс с помощью rowсвоего, rowчтобы переместить его вверху списка без изменения вашего DOM, и это позволяет вам легко сохранять исходный порядок

$(document).on('change', '.oncourt', function() {
  if( $(this).is(":checked") ) {
$(this).closest('.row').addClass('is-checked');
  } else {
$(this).closest('.row').removeClass('is-checked');
  }
});

#player-list {
  display: flex;
  flex-direction: column;
}

.is-checked {
  order: -1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="player-list">
    <div class="row">
        <div id=1><input type="checkbox" class="oncourt"> ROW 1</div>
    </div>
    <div class="row">
        <div id=2><input type="checkbox" class="oncourt"> ROW 2</div>
    </div>
    <div class="row">
        <div id=3><input type="checkbox" class="oncourt"> ROW 3</div>
    </div>
    <div class="row">
        <div id=4><input type="checkbox" class="oncourt"> ROW 4</div>
    </div>
    <div class="row">
        <div id=5><input type="checkbox" class="oncourt"> ROW 5</div>
    </div>
    <div class="row">
        <div id=6><input type="checkbox" class="oncourt"> ROW 6</div>
    </div>
    <div class="row">
        <div id=7><input type="checkbox" class="oncourt"> ROW 7</div>
    </div>
    <div class="row">
        <div id=8><input type="checkbox" class="oncourt"> ROW 8</div>
    </div>
</div>

score 1 · Accepted Answer

1

Вы можете $(this).is(":checked")узнать, установлен ли флажок. Здесь полный код.

$(document).on('click', '#player-list input[type=checkbox].oncourt',function(){
    if($(this).is(":checked")){
        $(this).parent().prependTo("#player-list");
    }else{
        $(this).parent().appendTo("#player-list")
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="player-list">

    <div class="row">
      <div id=1><input type="checkbox" class="oncourt"> ROW 1</div>
    </div>
    
    <div class="row">
      <div id=2><input type="checkbox" class="oncourt"> ROW 2</div>
    </div>
    
    <div class="row">
      <div id=3><input type="checkbox" class="oncourt"> ROW 3</div>
    </div>
    
    <div class="row">
      <div id=4><input type="checkbox" class="oncourt"> ROW 4</div>
    </div>
    
    <div class="row">
      <div id=5><input type="checkbox" class="oncourt"> ROW 5</div>
    </div>
    
    <div class="row">
      <div id=6><input type="checkbox" class="oncourt"> ROW 6</div>
    </div>
    
    <div class="row">
      <div id=7><input type="checkbox" class="oncourt"> ROW 7</div>
    </div>
    
    <div class="row">
      <div id=8><input type="checkbox" class="oncourt"> ROW 8</div>
    </div>

</div>