sort alphatically by each attribute named "data-letter"

Question

I want to sort the div's that has attribute of "data-letter" alphabetically base on the value of the selected option in the select box. For example if the user select "A" in the select box then each div that has a attribute of "data-letter" will then be arrange alphabetically e.g. "A, B, C, D, E and so on" base in there corresponding "data-letter" attribute content. Any ideas, help, clues, suggestions and recommendations would be greatly appreciated. Thank you!

html structure

<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>

my script

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

Are these div added programatically ? How do you add them if so ? — Fortune, Jun 17 '15 at 12:09
http://stackoverflow.com/questions/14160498/sort-element-by-numerical-value-of-data-attribute — befzz, Jun 17 '15 at 12:17
@Jamiec: if user choose B then the div's that has a attribute of data-letters will be arrange alphabetically like "A, B, C, and so on" — Juliver Galleto, Jun 17 '15 at 12:18
So, no change at all from selecting `A`. I fail to see the point of the select then. Are you sure you're explaining this completely? — Jamiec, Jun 17 '15 at 12:19
@Jamiec: there's no change as there is no script yet for that function as you can see on the code reference on my post. — Juliver Galleto, Jun 17 '15 at 12:22
Closing as duplicate of the linked post above. There appears to be nothing additional about this question from the solution already provided. — Jamiec, Jun 17 '15 at 12:23

score 0 · Accepted Answer · answered Jun 17 '15 at 12:40

$(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>

sort alphatically by each attribute named "data-letter"

1 Answers1