将活动列表节点项拉到第二个位置

Question

我有一个项目列表。我有'active'类的节点id。 我想获取活动的flex node_id并将活动列表项拉到中心位置。我想将active_slide node_id与列表项类匹配，并将项目拉到中心位置。

例如：233是'active_slide'。我想比较node_id并拉出列表项并将项目拉到中心位置，如69,233,299

jQuery(document).ready(function($){
setTimeout(function(){ 
var node_id = $('.flex-active-slide .node_id').text();
   $('.thumbnailIcon').each(function(index, item){
    	$('.'+node_id+'li:eq(1)').before($('.thumbnailIcon li:eq(2)'));
   }); 
},1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
    <div class="node_id"><span>233</span></div>
    <ul class="thumbnailIcon">
      <li>left</li>  
      <li class="233">1</li>
      <li class="69">2</li>
      
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
</li>
<li class="parent">
    <div class="node_id"><span>222</span></div>
    <ul class="thumbnailIcon">
      <li>left</li> 
      <li class="233">1</li>
      <li class="69">2</li>
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
    <div class="node_id"><span>333</span></div>
    <ul class="thumbnailIcon">
      <li>left</li>  
       <li class="233">1</li>
      <li class="69">2</li>
     
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
</li>

Answer 1

您可以使用item中已获得的each元素，然后按li重新排序insertAfter：

在这里看一个小提琴：

jQuery(document).ready(function($){
   setTimeout(function(){ 
      var node_id = $('.flex-active-slide .node_id').text();
      $('.thumbnailIcon').each(function(index, item){
         $(item).find('.'+node_id).insertAfter($(item).find('li:eq(2)'));
      }); 
   },1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent flex-active-slide">
    <div class="node_id"><span>233</span></div>
    <ul class="thumbnailIcon">
      <li>left</li>  
      <li class="233">1</li>
      <li class="69">2</li>
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
</li>
<li class="parent">
    <div class="node_id"><span>222</span></div>
    <ul class="thumbnailIcon">
      <li>left</li> 
      <li class="233">1</li>
      <li class="69">2</li>
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
</li>
<a href="#" class="flex-next">click<a>
<li class="parent">
    <div class="node_id"><span>333</span></div>
    <ul class="thumbnailIcon">
      <li>left</li>  
      <li class="233">1</li>
      <li class="69">2</li>
      <li class="299">3</li>
      <li>right</li>  
    </ul> 
</li>