javascript - 重新排列和删除容器内的元素

Question

我有一个包含几个 span 元素的重复容器。我想删除两个，然后重新排列其中一个元素，如下例所示。我从这样的事情开始:

$('span.class5').insertBefore('span.class0');

这添加了在每个重复容器内的页面上找到的每个 span.class5，所以这不起作用。我如何使用 jQuery 做到最好？

HTML:

 <div class="container">

 <div class="group">
    <span class="class0"></span>
    <span class="class1"></span>
    <span class="class2"></span>
    <span class="class3"></span>
  </div>

  <div class="group">
    <span class="class4"></span>
    <span class="class5"></span>
    <span class="class6"></span>
    <span class="class7"></span>
    <span class="class8"></span>
 </div>

</div>

重新排列为:

 <div class="container">

 <div class="group">
    <span class="class0"></span>
    <span class="class5"></span>
    <span class="class1"></span>
    <span class="class2"></span> = remove
    <span class="class3"></span> = remove
  </div>

  <div class="group">
    <span class="class4"></span>
    <span class="class6"></span>
    <span class="class7"></span>
    <span class="class8"></span>
 </div>

</div>

Answer 1

一个可能的解决方案:
(使用 jQuery)

// I would like to remove two
$('.class2 , .class3' , '.group').remove();

//This added each span.class5 found on page inside each repeating container
$('span.class5').each(function(){
  var $el = $(this);
  var $father = $el.parents('.container');
  
  //         if you don't want to use a class for the container
  //         decomment line under
  //var $father = $el.parent().parent();
  
  
  $el.insertAfter($father.find('.class0'))
});

span{
  border : solid 1px #EEE;
  display : inline-block;
  padding : 3px;
  margin : 3px;
  }

.container{
  border : solid 1px #CCC;
  padding 3px;
  margin : 3px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <div class="group">
    <span class="class0">0</span>
    <span class="class1">1</span>
    <span class="class2">2</span>
    <span class="class3">3</span>
  </div>

  <div class="group">
    <span class="class4">4</span>
    <span class="class5">5</span>
    <span class="class6">6</span>
    <span class="class7">7</span>
    <span class="class8">8</span>
  </div>
</div>
<div class='container'>
  <div class="group">
    <span class="class0">0</span>
    <span class="class1">1</span>
    <span class="class2">2</span>
    <span class="class3">3</span>
  </div>

  <div class="group">
    <span class="class4">4</span>
    <span class="class5">5</span>
    <span class="class6">6</span>
    <span class="class7">7</span>
    <span class="class8">8</span>
  </div>
</div>
<div class='container'>
  <div class="group">
    <span class="class0">0</span>
    <span class="class1">1</span>
    <span class="class2">2</span>
    <span class="class3">3</span>
  </div>

  <div class="group">
    <span class="class4">4</span>
    <span class="class5">5</span>
    <span class="class6">6</span>
    <span class="class7">7</span>
    <span class="class8">8</span>
  </div>
</div>
<div class='container'>
  <div class="group">
    <span class="class0">0</span>
    <span class="class1">1</span>
    <span class="class2">2</span>
    <span class="class3">3</span>
  </div>

  <div class="group">
    <span class="class4">4</span>
    <span class="class5">5</span>
    <span class="class6">6</span>
    <span class="class7">7</span>
    <span class="class8">8</span>
  </div>
</div>