Sorting HTML ul

Question

So my question is it possible to sort list items by number in strong tag, when i try with JavaScript code below it sort numbers and but get them out of div tag. (I use these js code for sorting by Name and it work fine when b = ...(LI)) HTML:

<section>
<button class="sortbynum" onclick="sortListNum()">Sort By Num</button>
<ul id="sort">
    <li> 
       <div><h2>Name</h2></div>  
       <a href=""><img src=""/></a> 
       <div><span>Something:...</span></div>
       <div><span>something:...</span></div>
       <div><span>HHJS: <strong class="sortNum">456</strong></span></div>
    </li>
    <li>again</li>
</ul>

JavaScript:

function sortListNum() {var list, i, switching, b, shouldSwitch, dir,switchcount = 0;list = document.getElementById("sort");switching = true;dir = "asc"; while (switching) {switching = false;b = list.getElementsByClassName("sortNum");
for (i = 0; i < (b.length - 1); i++) {
  shouldSwitch = false;
  if (dir == "asc") {
    if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
      shouldSwitch= true;
      break;
    }
  } else if (dir == "desc") {
    if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
      shouldSwitch= true;
      break;
    }
  }
}
if (shouldSwitch) {
  b[i].parentNode.insertBefore(b[i + 1], b[i]);
  switching = true;
  switchcount ++;
} else {
  if (switchcount == 0 && dir == "asc") {
    dir = "desc";
    switching = true;
  }
}}}

Hi and welcome to Stack Overflow, please take a time to go through the [welcome tour](https://stackoverflow.com/tour) to know your way around here (and also to earn your first badge), read how to create a [Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) and also check [How to Ask Good Questions](https://stackoverflow.com/help/how-to-ask) so you increase your chances to get feedback and useful answers. — DarkCygnus, Jul 05 '17 at 16:43
Good luck! Side note, We are not a code writing service. Please refer to [How to ask a good question?](https://stackoverflow.com/help/how-to-ask). Have you tried to do any research? What have you tried? Questions here should have a clear problem/question, with research shown, and a [Minimal, Complete, and Verifiable](https://stackoverflow.com/help/mcve) example. — GrumpyCrouton, Jul 05 '17 at 16:50
You have the question tagged as jQuery, so take a look at: https://stackoverflow.com/questions/304396/what-is-the-easiest-way-to-order-a-ul-ol-in-jquery. I would add classes to each bit you'd like to sort by and then the sort function can easily target that class within the li — Barbara Laird, Jul 05 '17 at 17:19

score 0 · Answer 1 · answered Jul 06 '17 at 18:35

I've managed to extrapolate from this that you're asking if you can extract text from inline elements.

You can select them like anything else, but it's a little more interesting that.

innerHTML returns HTML, which can be HTML or plain text or both.

innerText returns plain text.

textContent returns all of the contained plain text concatenated into one string, only separated by newline characters when the next element is on a new line.

Since you have more text than just the number within the element, just select the strong tag and call innerText:

document.querySelector('#sort .sortNum').innerText

I dont need to extract text, i need to sort those list items by number whitch is in strong tag. — theKln, Jul 06 '17 at 20:17

Sorting HTML ul

1 Answers1