How to highlight items from a <li> list, changing the position regardless of where it appears

Question

I am building an application without database and with json, I am using a list <ul><li></li></ul> to display the items, What I need to do is make a few items stand out. Ex.

here a normal list, as I am displaying

<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4 (destaque)</li> 
<li>Item 5</li> 
<li>Item 6</li> 
<li>Item 7(destaque)</li> 
<li>Item 8</li>

Here is the list I wish to show already changed

<li>Item 4 (destaque)</li> 
<li>Item 7(destaque)</li> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 5</li> 
<li>Item 6</li> 
<li>Item 8</li>

I’ve searched several filters in Jquery, but none of them meet my need.

Answer 1

If you want to show highlights at the top then you need sorting. Assuming only part of the information that is in html, you can sort with the sort based on the result that comes from a Jquery selector.

This order would be according to the criteria you want, ordering first by prominence and then by name. After that just move the elements in html to the ordered position.

Example:

$(".lista li").on("click", function(){
  $(this).toggleClass("destaque"); //alternar destaque no clique
  atualizaLista();
});

function atualizaLista(){
  let listaOrdenada = $(".lista li").sort((a,b) => {
    let a_destaque = a.classList.contains("destaque");
    let b_destaque = b.classList.contains("destaque");
    
    if (a_destaque == b_destaque) //se ambos com o mesmo destaque
      return a.textContent.localeCompare(b.textContent); //ordenar pelo nome
    else //caso contrario 
      return a_destaque && !b_destaque ? -1 : 1; //ordenar pelo destaque
  });
  
  for (let i = 0; i < listaOrdenada.length; i++) {
      //mover o elemento no html para o sitio correto de acordo com a ordenação
      listaOrdenada[i].parentNode.appendChild(listaOrdenada[i]); 
  }
}

.destaque {
  background-color:cyan;
}

.destaque:after {
  content:' (destaque)';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Clique nos items para destacar

<ul class="lista">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
  <li>Item 8</li>
<ul>