私はli内の最初のdivのテキストを昇順にしたいですか？

Question

は、これは私がこのコードが動作しているアドバンス

マイ第一div text

$(".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="" />

li内部のおかげで昇順たいクリック]チェックボックスをオンに

私のULのliのdiv構造です。しかし、私はliの最初のdivテキストのみを昇順にしたい。

Answer 1

あなたは何を求めているのか正確にはわかりませんが、これによってdivの機能が機能します。

$(".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="" />