сортировать по алфавиту по каждому атрибуту с именем «data-letter»

Question

Я хочу сортировать div, который имеет атрибут «data-letter» в алфавитном порядке по значению выбранной опции в поле выбора. Например, если пользователь выбирает «A» в поле выбора, тогда каждый div, который имеет атрибут «data-letter», будет затем упорядочен в алфавитном порядке, например. «A, B, C, D, E и т. Д.», В которой содержится соответствующий атрибут «data-letter». Любые идеи, помощь, подсказки, предложения и рекомендации будут высоко оценены. Спасибо!

HTML структура

<div class="select_holder"> 
    <select> 
     <option value="A">A</option> 
     <option value="B">B</option> 
     <option value="C">C</option> 
    </select> 
</div> 
<div class="box_container"> 
    <div data-letter="B"> 
     this is the content of box 
    </div> 
    <div data-letter="A"> 
     this is the content of box 
    </div> 
    <div data-letter="C"> 
     this is the content of box 
    </div> 
    <div data-letter="C"> 
     this is the content of box 
    </div> 
    <div data-letter="A"> 
     this is the content of box 
    </div> 
    <div data-letter="A"> 
     this is the content of box 
    </div> 
    <div data-letter="C"> 
     this is the content of box 
    </div> 
</div> 

мой сценарий

$(document).ready(function(){ 
    $("select").change(function(){ 
     //$(this).val(); 
     //I dont know how to make it like sort it up alphatically :(
    }); 
}); 

Answer 1

$(document).ready(function(){ 
 
    $("select").change(function(){ 
 
     var value = this.options[this.selectedIndex].value; 
 
     var box = $('.box_container'); 
 
     box.find('div').sort(function(a,b){ 
 
      
 
      if(a.getAttribute('data-letter') == value){ 
 
      return 0; 
 
      } 
 
      if(b.getAttribute('data-letter') == value){ 
 
      return 1; 
 
      } 
 
      return (a.getAttribute('data-letter') > b.getAttribute('data-letter')?1:-1); 
 
     }).appendTo(box); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="select_holder"> 
 
    <select> 
 
     <option value="A">A</option> 
 
     <option value="B">B</option> 
 
     <option value="C">C</option> 
 
    </select> 
 
</div> 
 
<div class="box_container"> 
 
    <div data-letter="B"> 
 
     this is the content of box B 
 
    </div> 
 
    <div data-letter="A"> 
 
     this is the content of box A 
 
    </div> 
 
    <div data-letter="C"> 
 
     this is the content of box C 
 
    </div> 
 
    <div data-letter="C"> 
 
     this is the content of box C 
 
    </div> 
 
    <div data-letter="A"> 
 
     this is the content of box A 
 
    </div> 
 
    <div data-letter="Z"> 
 
     this is the content of box Z 
 
    </div> 
 
    <div data-letter="A"> 
 
     this is the content of box A 
 
    </div> 
 
    <div data-letter="C"> 
 
     this is the content of box C 
 
    </div> 
 
     <div data-letter="B"> 
 
     this is the content of box B 
 
    </div> 
 
</div>