JQuery sorting li by only first div inside

Question

Try to make a sort

by using jquery sort. I would like to sort this li's by first div content(in my example, sort by aaa, bbb, ccc and ddd containing fields). Thanks in advance. Here is my code. Try to use .first() and changing the tags, it all useless( Hope for your help

My code:

function newSort(){
    $('#attachedCards ul li').html(
        $('#attachedCards ul li').children('div').sort(function (a, b) {
           return $(a).text().toUpperCase().localeCompare(
                $(b).text().toUpperCase());
        })
    );
}

html-structure:

<div id="attachedCards">
    <ul>
           <li>
                <div>ddd</div>
                <div>
                some useless info2
                </div>

            </li>

            <li>
            <div>ccc</div>
            <div>some useless info1</div>
            </li>
           <li>
           <div>bbb</div>
            <div>some useless info3</div>
           </li>
           <li>
            <div>aaa</div>
            <div>some useless info4</div>
           </li>
       </ul>
  </div>

expected result:

aaa
some useless info4
bbb
some useless info3
ccc
some useless info1
ddd
some useless info2

I have now:

  <ul>
    <li>
    aaa<br/>
    bbb<br/>
    ccc<br/>
    ddd<br/>
    some useless info1<br/>
    some useless info2<br/>
    some useless info3<br/>
    some useless info4<br/>
    </li>
    <li>
    aaa<br/>
    bbb<br/>
    ccc<br/>
    ddd<br/>
    some useless info1<br/>
    some useless info2<br/>
    some useless info3<br/>
    some useless info4<br/>
    </li>
    <li>
    aaa<br/>
    bbb<br/>
    ccc<br/>
    ddd<br/>
    some useless info1<br/>
    some useless info2<br/>
    some useless info3<br/>
    some useless info4<br/>
    </li>
    <li>
    aaa<br/>
    bbb<br/>
    ccc<br/>
    ddd<br/>
    some useless info1<br/>
    some useless info2<br/>
    some useless info3<br/>
    some useless info4<br/>
    </li>
    </ul>

https://jsfiddle.net/1wocs4rn/ – Alexandre Elshobokshy Mar 05 '20 at 08:16 — Alexandre Elshobokshy, Mar 05 '20 at 08:16

score 0 · Accepted Answer · answered Mar 05 '20 at 08:24

I made this. It works like i want

function newSort(){
$('#attachedCards ul').html(
    $('#attachedCards ul li').sort(function (a, b) {
        return $(a).children('div')[0].textContent.toUpperCase().localeCompare(
            $(b).children('div')[0].textContent.toUpperCase());  

    })
);

Thanks everyone for answering

JQuery sorting li by only first div inside

1 Answers1