TransWikia.com

ordenar divs con jquery

Stack Overflow en español Asked on February 12, 2021

// Ordena los productos ascendentemente y descententemente //

$('.container_loader').hide();

    var product = $('.producto');

    function order_motorcycle(){ // Ordenar ascendentemente //
    product.sort(function(a, b){
    return a.textContent > b.textContent ? 1 : -1;
    }).appendTo('.right_section');
    } order_motorcycle();

    $('#order_products').change(function(){
    
    product.hide().delay(3000).fadeIn(3000); // <-- Si elimino esto, se resuelve mi problema //
    
    $('.container_loader').fadeIn(1000).delay(2000).fadeOut();

    if($('option:nth-of-type(2)').is(':selected')){
    
    product.sort(function(a,b){ // Ordena descendentemente //
    return a.textContent < b.textContent ? 1 : -1;
    }).appendTo('.right_section');
    } else {
    order_motorcycle();
    }
      });
      
      function buscar() {
    var buscador = $('#buscador').val().toLowerCase();
    var not_found = true;
    var listCategory = '';
    $('.producto span').each(function () {
        var name_products = $(this).text().toLowerCase();
        if (name_products.indexOf(buscador) !== -1) {
            var category_products = $(this).parents('.producto').attr('category');
            $(this).parents('.producto').show();
            not_found = false;
            listCategory += category_products; 
            //Concateno todo lo que se vaya a mostrar en una sola variable y la valido al final.
        }
        else {
            $(this).parents('.producto').hide();
        }

        if (!not_found) {
            $('#text').hide();
        } else {
            $('#text').show();
            $('.btn-check').prop('checked', false);
        }

    });
    if (listCategory.length > 0) {//Aqui hare la validación de tus checkbox
        $('.btn-check').each(function () {
            var check = $(this).attr('category');
            if (listCategory.indexOf(check) !== -1) {
                $(this).prop('checked', true);
            } else {
                $(this).prop('checked', false);
            }
        });
    }
}
$('#buscador').on('keypress', function (e) {
    if (e.keyCode == 13) {
        buscar();
    }
});

// Buscador //
$('#button_search').on('click', function () {
    buscar();
});

// Casillas checkbox //
$('.btn-check').prop('checked', true);
$('#apply_filter').on('click', function () {
    $('.producto').hide();
    $('#text').hide();
    $('.btn-check:checked').each(function () {
        var input_category = $(this).attr('category');
        $('.producto[category*="' + input_category + '"]').show();

    });
});

$('#all').on('click', function () {

    if ($('#all').is(':checked')) {
        $('.btn-check:not(#all)').prop('checked', true);
    } else if ($('#all').not(':checked')) {
        $('.btn-check:not(#all)').prop('checked', false);
    }

});
    
body{
display: flex;
}
.left_section{
width: 30%;
background: #cdcdcd;
}
.left_section select{
display: block;
margin: auto;
font-size: 1.65em;
}
.right_section{
width: 70%;
background: #ededed;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.producto{
width: 25%;
text-align: center;
background: #cdcdcd;
display: table;
}
img{
width: 100%;
}
.container_loader{
display: none;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
}
.loading{

display: flex;
justify-content: center;
align-items: center;
}
.loader{
width: 35px;
height: 35px;
background: transparent;
border-radius: 50%;
border: 3.5px solid;
border-right-color: #CDCDCD;
border-top-color: #CDCDCD;
border-bottom-color: #CDCDCD;
animation: spin .5s linear infinite;
margin-right: 1%;
}
@keyframes spin {
0%{
    background-color:transparent;
    transform: rotate(360deg);
}
    }
#text{
font-size: 2vw;
position: relative;
padding: 25%;
display: none;
}
.category{
display: block;
}
.category input,
.category label{
cursor: pointer;
font-size: 1.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<aside class="left_section">

    <select id="order_products">
        <option>Ordenar ascendentemente</option>
        <option>Ordenar descendentemente</option>
    </select>
    <input type="text" id="buscador" placeholder="Buscar moto..." maxlength="36">
    <button id="button_search">Buscar</button>
    <span class="category"><input type="checkbox" class="btn-check" id="all" category="all"><label for="all">All</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="verde" category="verde"><label for="verde">moto de color verde</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="rojo" category="rojo"><label for="rojo">moto de color rojo</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="blanco" category="blanco"><label for="blanco">moto de color blanco</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="gris" category="gris"><label for="gris">moto de color gris</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="negro" category="negro"><label for="negro">moto de color negro</label></span>
    <button id="apply_filter">Aplicar filtro</button>

</aside>

<aside class="right_section">

<div class="producto" category="all gris"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ninja-H2R.jpg"><span>Moto Rfa 2000</span></div>

<div class="producto" category="all verde"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ZX-10RR_g.jpg"><span>Sudora KFI</span></div>

<div class="producto" category="all blanco"><img src="https://as.com/betech/imagenes/2017/10/13/portada/1507918164_397427_1507918224_noticia_normal.jpg"><span>Z-moto 6000 turbo</span></div>

<div class="producto" category="all negro"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Hirasc 300k</span></div>

<div class="producto" category="all rojo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTt-wqMoSBYFaR6dIJE9a02yMmQJl6AUYrYnQ&usqp=CAU"><span>Az Mini-Inferno 10000</span></div>

<div class="producto" category="all gris"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAk-Q8UCYkf4YBLwh6QZr1yx-gB8mbn0Hh9Q&usqp=CAU"><span>Droma T legacy</span></div>

<div class="producto" category="all blanco"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRcHyCIrQoZjVqudofBdi_qh9wGiRJfdpbZxw&usqp=CAU"><span>KazaQ Op</span></div>

<div class="producto" category="all negro"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Marine T-5000</span></div>

<div class="container_loader">
<div class="loading">
    <div class="loader"></div>
    <p>Cargando productos...</p>
</div>
</div>

<p id="text">No se encontraron resultados...</p>

</aside>

Hola a todos, tengo un pequeño problema para ordenar divs , si haces clic en un option, te ordena segun lo que dice el option, ahora para ordenar seleccione todos los div con clase producto, y los ordene segun su texto, le agregue un efecto, que se oculte por 3 seg (lo que dura en aparecer el loading) y que luego me genere un fadeIn, si elimino este efecto, se resuelve el problema, me ordena segun el filtro que tenga, es decir, si tiene marcadas las casillas de moto de color gris y moto de color blanco, y luego le das en ordenar ascendentemente o lo contrario a esta, te los ordena normal, solo si le quitas product.hide().delay(3000).fadeIn(3000); , ahi viene mi problema, ¿Cómo hago para que me ordene normal teniendo este efecto? , es decir, que los productos mostrados dependiendo de las casillas marcadas, o los productos buscados en el input text se ordenen teniendo el efecto antes mencionado. Gracias de antemano.

One Answer

Amigo el problema radica en que estas usando el efecto fade de jquery el cual establece la propiedad display: none, provocando que el elemento al que se le asigne no este presente en el DOM de la pagina. Debido a esto cuando tratas de filtrar en la lista que anteriormente tenias todos los ".product" esta vacia. Te propongo utilizar la funcion animate de jquery para añadir efecto y la propiedad css opacity para ocultar y mostrar los ".product".

// Ordena los productos ascendentemente y descententemente //

$('.container_loader').hide();

    var product = $('.producto');

    function order_motorcycle(){ // Ordenar ascendentemente //
    product.sort(function(a, b){
    return a.textContent > b.textContent ? 1 : -1;
    }).appendTo('.right_section');
    } order_motorcycle();

    $('#order_products').change(function(){
    
    $('.container_loader').fadeIn().delay(2000).fadeOut();
    product.animate({opacity: 0},0 ).delay(3000).animate({opacity: 1}, 2000); // <-- aqui es donde necesitas cambiar el efecto fade por opacity //
    

    if($('option:nth-of-type(2)').is(':selected')){
    
    product.sort(function(a,b){ // Ordena descendentemente //
    return a.textContent < b.textContent ? 1 : -1;
    }).appendTo('.right_section');
    } else {
    order_motorcycle();
    }
      });
      
      function buscar() {
    var buscador = $('#buscador').val().toLowerCase();
    var not_found = true;
    var listCategory = '';
    $('.producto span').each(function () {
        var name_products = $(this).text().toLowerCase();
        if (name_products.indexOf(buscador) !== -1) {
            var category_products = $(this).parents('.producto').attr('category');
            $(this).parents('.producto').show();
            not_found = false;
            listCategory += category_products; 
            //Concateno todo lo que se vaya a mostrar en una sola variable y la valido al final.
        }
        else {
            $(this).parents('.producto').hide();
        }

        if (!not_found) {
            $('#text').hide();
        } else {
            $('#text').show();
            $('.btn-check').prop('checked', false);
        }

    });
    if (listCategory.length > 0) {//Aqui hare la validación de tus checkbox
        $('.btn-check').each(function () {
            var check = $(this).attr('category');
            if (listCategory.indexOf(check) !== -1) {
                $(this).prop('checked', true);
            } else {
                $(this).prop('checked', false);
            }
        });
    }
}
$('#buscador').on('keypress', function (e) {
    if (e.keyCode == 13) {
        buscar();
    }
});

// Buscador //
$('#button_search').on('click', function () {
    buscar();
});

// Casillas checkbox //
$('.btn-check').prop('checked', true);
$('#apply_filter').on('click', function () {
    $('.producto').hide();
    $('#text').hide();
    $('.btn-check:checked').each(function () {
        var input_category = $(this).attr('category');
        $('.producto[category*="' + input_category + '"]').show();

    });
});

$('#all').on('click', function () {

    if ($('#all').is(':checked')) {
        $('.btn-check:not(#all)').prop('checked', true);
    } else if ($('#all').not(':checked')) {
        $('.btn-check:not(#all)').prop('checked', false);
    }

});
    
body{
display: flex;
}
.left_section{
width: 30%;
background: #cdcdcd;
}
.left_section select{
display: block;
margin: auto;
font-size: 1.65em;
}
.right_section{
width: 70%;
background: #ededed;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
}
.producto{
width: 25%;
text-align: center;
background: #cdcdcd;
display: table;
}
img{
width: 100%;
}
.container_loader{
display: none;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
}
.loading{

display: flex;
justify-content: center;
align-items: center;
}
.loader{
width: 35px;
height: 35px;
background: transparent;
border-radius: 50%;
border: 3.5px solid;
border-right-color: #CDCDCD;
border-top-color: #CDCDCD;
border-bottom-color: #CDCDCD;
animation: spin .5s linear infinite;
margin-right: 1%;
}
@keyframes spin {
0%{
    background-color:transparent;
    transform: rotate(360deg);
}
    }
#text{
font-size: 2vw;
position: relative;
padding: 25%;
display: none;
}
.category{
display: block;
}
.category input,
.category label{
cursor: pointer;
font-size: 1.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<aside class="left_section">

    <select id="order_products">
        <option>Ordenar ascendentemente</option>
        <option>Ordenar descendentemente</option>
    </select>
    <input type="text" id="buscador" placeholder="Buscar moto..." maxlength="36">
    <button id="button_search">Buscar</button>
    <span class="category"><input type="checkbox" class="btn-check" id="all" category="all"><label for="all">All</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="verde" category="verde"><label for="verde">moto de color verde</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="rojo" category="rojo"><label for="rojo">moto de color rojo</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="blanco" category="blanco"><label for="blanco">moto de color blanco</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="gris" category="gris"><label for="gris">moto de color gris</label></span>
    <span class="category"><input type="checkbox" class="btn-check" id="negro" category="negro"><label for="negro">moto de color negro</label></span>
    <button id="apply_filter">Aplicar filtro</button>

</aside>

<aside class="right_section">

<div class="producto" category="all gris"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ninja-H2R.jpg"><span>Moto Rfa 2000</span></div>

<div class="producto" category="all verde"><img src="https://www.formulamoto.es/elementosWeb/gestionCajas/FOM/Image/2018//kawasaki-ZX-10RR_g.jpg"><span>Sudora KFI</span></div>

<div class="producto" category="all blanco"><img src="https://as.com/betech/imagenes/2017/10/13/portada/1507918164_397427_1507918224_noticia_normal.jpg"><span>Z-moto 6000 turbo</span></div>

<div class="producto" category="all negro"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Hirasc 300k</span></div>

<div class="producto" category="all rojo"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTt-wqMoSBYFaR6dIJE9a02yMmQJl6AUYrYnQ&usqp=CAU"><span>Az Mini-Inferno 10000</span></div>

<div class="producto" category="all gris"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAk-Q8UCYkf4YBLwh6QZr1yx-gB8mbn0Hh9Q&usqp=CAU"><span>Droma T legacy</span></div>

<div class="producto" category="all blanco"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRcHyCIrQoZjVqudofBdi_qh9wGiRJfdpbZxw&usqp=CAU"><span>KazaQ Op</span></div>

<div class="producto" category="all negro"><img src="https://www.crmotos.com/motocicletas/formula/bajacilindrada/sport/sportx200/fotos/1M.jpg"><span>Marine T-5000</span></div>

<div class="container_loader">
<div class="loading">
    <div class="loader"></div>
    <p>Cargando productos...</p>
</div>
</div>

<p id="text">No se encontraron resultados...</p>

</aside>

Answered by Edel Rojas on February 12, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP