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）

＆＃13;

// 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'))
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用父＆gt;子选择器将操作限制为特定容器：

function rearrange(num) {
  $('.container' + num + ' > .group > .class2').remove();
  $('.container' + num + ' > .group > .class3').remove();
  $('.container' + num + ' > .group > .class5').insertBefore($('.container' + num + ' > .group > .class0'));
}

.group {
  background-color: lightgray;
  margin: 4px
}
.group span {
  margin: 3px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container1">
  <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>
  <button onclick="rearrange(1)">Rearrange</button>
</div>
<div class="container2">
  <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>
  <button onclick="rearrange(2)">Rearrange</button>
</div>

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

2 个答案: