重新排列和移除容器內的元素

Question

我有一個重複的容器，有幾個跨度元素。我想刪除兩個，並重新排列其中一個元素，如下例所示。我開始是這樣的：

$('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>

Answer 2

你可以使用父>子選擇器來限制操作的特定容器：

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>