Как переместить 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


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>


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>

JavaScript, JQuery, HTML, флажок,
Похожие вопросы