Je veux Ascending 1st div text inside li ..?

Question

This Is My ul li div Structure

On clique case I Want My Croissant 1er div text intérieur li

$(".ascsection").click(function(){     
 
     var items = $('#Section li').get(); 
 
     items.sort(function(a,b){ 
 
      var keyA = $("div:first", a).text(); 
 
      var keyB = $(b).text(); 
 
      if (keyA < keyB) return -1; 
 
      if (keyA > keyB) return 1; 
 
      return 0; 
 
     }); 
 
     var ul = $('#Section'); 
 
     $.each(items, function(i, li){ 
 
      ul.append(li); 
 
     });  
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="Section"> 
 
     <li> 
 
     <span style="display:flex;"> 
 
      <div id="ui-id-2" tabindex="-1" class="abc bethgfont" style="float:left;margin-left: 10px;margin-top: 10px;text-align: left;width: 50%;padding-bottom: 7px;">abc</div> 
 
      <div style="display:none;">27</div> 
 
      <div style="display:none;">Sub Section 1</div> 
 
      <div id="syriacname-27" class="syriacSection" style="float: right;margin-right: 10px;margin-top: 10px;text-align: right;width: 50%;padding-bottom: 7px;">Syriac 1</div> 
 
     </span> 
 
     </li> 
 
     <li> 
 
     <span style="display:flex;"> 
 
      <div id="ui-id-2" tabindex="-1" class="abc bethgfont" style="float:left;margin-left: 10px;margin-top: 10px;text-align: left;width: 50%;padding-bottom: 7px;">def</div> 
 
      <div style="display:none;">27</div> 
 
      <div style="display:none;">Sub Section 1</div> 
 
      <div id="syriacname-27" class="syriacSection" style="float: right;margin-right: 10px;margin-top: 10px;text-align: right;width: 50%;padding-bottom: 7px;">ashoka</div> 
 
     </span> 
 
     </li> 
 
    </ul> 
 

 
    
 

 
    <input type="checkbox" class="ascsection" value="" />

Merci à l'avance

ce code fonctionne. mais je veux ascendant seulement 1er texte div en li.

Answer 1

Je ne sais pas exactement ce que vous demandez, mais cela rend votre fonction pour les divs.

$(".ascsection").click(function(){     
 
     var items = $('#Section li div').get(); 
 
     items.sort(function(a,b){ 
 
      var keyA = $(a).text(); 
 
      var keyB = $(b).text(); 
 
      if (keyA < keyB) return -1; 
 
      if (keyA > keyB) return 1; 
 
      return 0; 
 
     }); 
 
     var ul = $('#Section'); 
 
     $.each(items, function(i, li){ 
 
      ul.append(li); 
 
     });  
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="Section"> 
 
     <li> 
 
     <span style="display:flex;"> 
 
      <div id="ui-id-2" tabindex="-1" class="abc bethgfont" style="float:left;margin-left: 10px;margin-top: 10px;text-align: left;width: 50%;padding-bottom: 7px;">Section</div> 
 
      <div style="display:none;">27</div> 
 
      <div style="display:none;">Sub Section 1</div> 
 
      <div id="syriacname-27" class="syriacSection" style="float: right;margin-right: 10px;margin-top: 10px;text-align: right;width: 50%;padding-bottom: 7px;">Syriac 1</div> 
 
     </span> 
 
     </li> 
 
    </ul> 
 

 
    
 

 
    <input type="checkbox" class="ascsection" value="" />