Question

我想

1）比较列表的类名

2）将列表项固定在具有active-slider node_id

的中心

3）使用类名

对列表进行排序

我有列表项233,299,68。

考虑233 node_id 是否有效，我想将其置于中心（工作）。

我的新列表是299,233,69。我想按顺序排序为69,233,299

setTimeout(function(){ 
      console.log('timeout');
      var node_id = $('.flex-active-slide .node_id').text();
      console.log('node_id', node_id);
      $('.thumbnailIcon').each(function(index, item){
         console.log(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   233</li>
      <li class="299">3    299</li>
      <li class="69">2   69</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="299">3    299</li>
      <li class="69">2</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="299">3    299</li>
      <li class="69">2</li>
      <li>right</li>  
    </ul> 
</li>

Answer 1

就我的理解而言，我认为您希望根据具有类parent的li的孩子的ul里面的类来排序项目，如果它有类flex-active-slide

Plunker Link for demonstration

所以有代码

$(document).ready(function() {
  $('li').each(function() {
    if ($(this).hasClass("flex-active-slide")) {
      var lisElems = []; //empty array
      var childUl = $(this).children().eq(1).html()
      $(childUl).each(function() {
        if ($(this).attr('class')) { //select all li having class 
          var classNum = $(this).attr('class');
          //pushing inside array key as class and html
          lisElems.push({
            "class": classNum,
            "html": $(this).html()
          })

        }
      })

      lisElems.sort(function(a, b) {
        return a.class - b.class;
      });
      $(this).children().eq(1).remove() //removing child ul of li
      var newlis = "<li>left</li> ";//creating new li
      for (var i = 0; i < lisElems.length; i++) {
        newlis += '<li class="' + lisElems[i].class + '">' + lisElems[i].html + '</li>'
      }
      newlis += '<li>right</li>'

      $(this).children().append("<ul>" + newlis + "<ul>") //appending in parent li

    }
  })
})

比较类名并对项列表进行排序

1 个答案: