Изменение порядка нумерации добавленных элементов с помощью jQuery после удаления - PullRequest
Новая
       8

Изменение порядка нумерации добавленных элементов с помощью jQuery после удаления

0 голосов
/ 30 августа 2018

Как сделать, чтобы добавленный элемент был переупорядочен снова после некоторого удаления данных? Я сделал следующий пример, и номер добавленного остается тем же номером после удаления. 

$(document).ready(function(){
	$('.do-append').on('click', function(){
  	var index = $('append div').length;
  	$('append').append('<div><label>Appended : '+index+'</label> &emsp; <a href="javascript:;" class="delete" style="color: red">delete</a></div>');
  });
  
  $('append').on('click', '.delete', function(e){
  	$(e.target).closest('append div').remove();
  });
})
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<a href="javascript:;" class="do-append">click me</a><br><br>
<append></append>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 30 августа 2018

Вы можете попробовать ниже логику, где вы можете обновить метку под div, которые после удаленного элемента. 

$(document).ready(function(){
	$('.do-append').on('click', function(){
  	var index = $('append div').length;
  	$('append').append('<div><label>Appended : '+index+'</label> &emsp; <a href="javascript:;" class="delete" style="color: red">delete</a></div>');
  });
  
  $('append').on('click', '.delete', function(e){
  	var $parent = $(e.target).closest('append div');
    var index = $parent.index();
    $parent.remove();
    if(index>0) {
      $('append div:gt('+ (index-1) +')').each(function(){
         $('label', this).html('Appended : '+index);
         index++;
       }); 
    } else {
        $('append div').each(function(){
         $('label', this).html('Appended : '+ index);
         index++;
      });
    }
  });
})
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<a href="javascript:;" class="do-append">click me</a><br><br>
<append></append>

</body>
</html>
0 голосов
/ 30 августа 2018

Создайте функцию updateLabels, как показано ниже, и вызывайте ее при добавлении и удалении элемента 

function updateLabels() {
    var index = $('append div').length;
    for (var i = 0; i < index; i++) {
      $($($('append div')[i]).find("label")[0]).text('Appended : ' + i);
    }
  }


$(document).ready(function() {
  $('.do-append').on('click', function() {
    var index = $('append div').length;
    $('append').append('<div><label></label> &emsp; <a href="javascript:;" class="delete" style="color: red">delete</a></div>');
    updateLabels();
  });

  $('append').on('click', '.delete', function(e) {
    $(e.target).closest('append div').remove();
    updateLabels();
  });

  function updateLabels() {
    var index = $('append div').length;
    for (var i = 0; i < index; i++) {
      $($($('append div')[i]).find("label")[0]).text('Appended : ' + i);
    }
  }
})
<html lang="en">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

<body>

  <a href="javascript:;" class="do-append">click me</a><br><br>
  <append></append>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...