Tengo dos tipos de filtros, uno por categorías y funciona bien, pero no he logrado organizar alfabeticamente (A-Z), tome los datos y los agregué a un array y los ordené con sort()
y se muestra ordenado el array, pero cuando muestro los divs, no.
<!DOCTYPE html>
<title>Products</title>
<!-- Menu footer -->
<div class="col-12 mb-4 toggle">
<div class="row">
<div class="col-sm-7 col-12 gray-links text-center" id="tags">
<div class="d-inline"><a class="sort bg-light p-2" href="">A-Z</a></div>
</div>
</div>
</div>
<!-- Products listing -->
<div class="col-12 m-0 p-0 pt-2" id="products">
<div class="row m-0 p-0">
<div class="col-12 col-md-9 ml-4 blue-links">
<div class="row m-0 p-0">
<div class="product col-xl-3 col-sm-4 col-5 mb-4 acer_predator_z35" id="computadores">
<a href="producto.php?id=<?php echo $id; ?>" ><img src="https://via.placeholder.com/165" alt=""></a>
<h6>Acer predator Z35</h6>
<h4 class="text-blue">$35.000</h4>
<button class="btn btn-blue"><small>Agregar al carro</small></button>
</div>
<div class="product col-xl-3 col-sm-4 col-5 mb-4 dell_infinityedge_5" id="computadores">
<a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
<h6>Dell InfinityEdge 5</h6>
<h4 class="text-blue">$35.000</h4>
<button class="btn btn-blue"><small>Agregar al carro</small></button>
</div>
<div class="product col-xl-3 col-sm-4 col-5 mb-4 xiaomi_poco_3" id="telefonos_y_tablets">
<a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
<h6>Xiaomi Poco 3</h6>
<h4 class="text-blue">$35.000</h4>
<button class="btn btn-blue"><small>Agregar al carro</small></button>
</div>
<div class="product col-xl-3 col-sm-4 col-5 mb-4 nikon_d3200" id="camaras_fotograficas">
<a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
<h6>Nikon D3200</h6>
<h4 class="text-blue">$35.000</h4>
<button class="btn btn-blue"><small>Agregar al carro</small></button>
</div>
<div class="product col-xl-3 col-sm-4 col-5 mb-4 acer_predator_z55" id="computadores">
<a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
<h6>Acer predator Z55</h6>
<h4 class="text-blue">$35.000</h4>
<button class="btn btn-blue"><small>Agregar al carro</small></button>
</div>
<div class="product col-xl-3 col-sm-4 col-5 mb-4 dell_infinityedge_7" id="computadores">
<a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
<h6>Dell InfinityEdge 7</h6>
<h4 class="text-blue">$35.000</h4>
<button class="btn btn-blue"><small>Agregar al carro</small></button>
</div>
<div class="product col-xl-3 col-sm-4 col-5 mb-4 samsung_a21s" id="telefonos_y_tablets">
<a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
<h6>Samsung A21s</h6>
<h4 class="text-blue">$35.000</h4>
<button class="btn btn-blue"><small>Agregar al carro</small></button>
</div>
<div class="product col-xl-3 col-sm-4 col-5 mb-4 gopro_max" id="camaras_fotograficas">
<a href="producto.php?id=<?php echo $id; ?>"><img src="https://via.placeholder.com/165" alt=""></a>
<h6>GoPro Max</h6>
<h4 class="text-blue">$35.000</h4>
<button class="btn btn-blue"><small>Agregar al carro</small></button>
</div>
</div>
<div class="col-12 row justify-content-center mt-4">
<nav aria-label="Page navigation">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
<div class="col-3 d-none d-md-block row">
<div class="justify-content-center">
<div class="blue-links">
<img class="img-fluid m-0 p-0" src="https://via.placeholder.com/270" alt="">
<h5><strong>Super vaccum</strong></h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptates, laborum laboriosam vero adipisci saepe dicta? Quos, dolor, adipisci nobis labore vel, distinctio nemo rem, soluta praesentium ad itaque vero!</p>
</div>
<hr>
<div class="d-flex justify-content-between">
<button class="btn btn-blue">Agregar al carro</button>
<h5>$35.000</h5>
</div>
</div>
</div>
</div>
</div>
<!-- Jquery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script>
$(document).ready(function($){
$('#tags').find('a').on('click', function(e){
e.preventDefault();
var products = $('#products').find('div.product');
$(products).hide();
var tipo = $(this).data('category');
if(tipo == 'todos'){
$(products).show();
}else{
$('#products').find('div.product#'+tipo).show();
}
});
});
</script>
<script>
$(document).ready(function(){
$('.sort').click(function(){
var products = $('#products').find('div.product');
$(products).hide();
var products = $('#products').find('div > h6');
let $arr = [];
$(products).each((i, el) => {
el.innerHTML = el.innerHTML.toLowerCase();
el.innerHTML = el.innerHTML.replace(/ /g,"_");
$arr.push(el.innerHTML)
});
$arr.sort()
$(products).each((i, el) => {
var products = $('#products').find('div.product.'+$arr[i]).show();
});
});
});
</script>