Jquery Sort And Filter List

I'm running into an issue where I'm unable to filter if I previously selected a sort value. I only want to sort the visible items but when I select a different filter option, the f

Solution 1:

Unless I am still misunderstanding you, the problem seems to be this line:

var $filterList = $('.js-filter-results-plans:visible');

When your "1" or "2" filter is applied, :visible ensures that $filterList starts out containing only two elements, when I believe you want it to contain all four of the elements. So, in the snippet below, I removed :visible:

var $filterList = $('.js-filter-results-plans');

UPDATE: I was going to mention parseInt, but you beat me to it. Apart from that, the improper sorting is not caused by the lack of :visible, it's caused by the fact that the return lines in your numerical sorts are incorrect. See the modified snippet below. Again, please let me know if the snippet gives the desired behavior.

// Filtering plans options 
$('.js-filter-options li a').click(function() {

    // looks for the class of the clicked optionsvar allPlans = $(this).attr('class');
    // reset the active class on all the options
    $('.js-filter-options li, .js-input-check').removeClass('active');
    // update the active state on clicked option
    $(this).parent().addClass('active');
    $(this).children().toggleClass('active');
    
    if(allPlans == 'js-all-plans') {
        // show all the plans
        $('.js-filter-results').find('section.js-filter-results-plans').show(); 
    }
    else {
        // hide plans that don't match class
        $('.js-filter-results').find('section:not(.' + allPlans + ')').hide();
        // show plans that are match class
        $('.js-filter-results').find('section.' + allPlans).show();
    }
});//end//Dropdown options filtering
$('.js-dropdown-filter').change(function() {
    // var $filterList = $('.js-filter-results-plans:visible');var $filterList = $('.js-filter-results-plans'); 

    // Do something for option price lowest to highestif ($(this).val() === 'low-high') {
        var lowHigh = $filterList.sort(function (a, b) {
            returnparseInt($(a).find('.price__amount').text()) - parseInt($(b).find('.price__amount').text());
        });
        $('.js-filter-results').html(lowHigh);

    }
    // Do something for option price highest to lowestelseif ($(this).val() === 'high-low') {
        var highLow = $filterList.sort(function (a, b) {
            returnparseInt($(b).find('.price__amount').text()) - parseInt($(a).find('.price__amount').text());
        });
        $('.js-filter-results').html(highLow);
    }
    // Do something for option popularelse {
        var popular = $filterList.sort(function (a, b) {
            return $(a).data("order")-$(b).data("order");
        });
        $('.js-filter-results').html(popular);  
    }
});//end

.h-hidden {
  display: none;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><ulclass="js-filter-options"><li><ahref="#"class="js-1-plan">1</a></li><li><ahref="#"class="js-2-plan">2</a></li><li><ahref="#"class="js-3-plan">3</a></li><li><ahref="#"class="js-4-plan">4</a></li></ul><!--/.js-filter-options --><selectclass="js-dropdown-filter"><optionvalue="popular">Popular</option><optionvalue="high-low">Price Highest to Lowest</option><optionvalue="low-high">Price Lowest to Highest</option></select><!--/.js-dropdown-filter --><sectionclass="js-filter-results"><sectionclass="js-filter-results-plans js-1-plan"data-order="1"><divclass="price"><spanclass="price__amount">24</span></div><!--/.price --></section><!--/.js-filter-results-plans --><sectionclass="js-filter-results-plans js-1-plan"data-order="2"><divclass="price"><spanclass="price__amount">34</span></div><!--/.price --></section><!--/.js-filter-results-plans --><sectionclass="js-filter-results-plans js-1-plan"data-order="3"><divclass="price"><spanclass="price__amount">33</span></div><!--/.price --></section><!--/.js-filter-results-plans --><sectionclass="js-filter-results-plans js-1-plan"data-order="4"><divclass="price"><spanclass="price__amount">92</span></div><!--/.price --></section><!--/.js-filter-results-plans --><sectionclass="js-filter-results-plans js-2-plan h-hidden"data-order="1"><divclass="price"><spanclass="price__amount">44</span></div><!--/.price --></section><!--/.js-filter-results-plans --><sectionclass="js-filter-results-plans js-2-plan h-hidden"data-order="2"><divclass="price"><spanclass="price__amount">55</span></div><!--/.price --></section><!--/.js-filter-results-plans --><sectionclass="js-filter-results-plans js-3-plan h-hidden"data-order="1"><divclass="price"><spanclass="price__amount">66</span></div><!--/.price --></section><!--/.js-filter-results-plans --><sectionclass="js-filter-results-plans js-3-plan h-hidden"data-order="2"><divclass="price"><spanclass="price__amount">42</span></div><!--/.price --></section><!--/.js-filter-results-plans --><sectionclass="js-filter-results-plans js-3-plan h-hidden"data-order="3"><divclass="price"><spanclass="price__amount">109</span></div><!--/.price --></section><!--/.js-filter-results-plans --><sectionclass="js-filter-results-plans js-3-plan h-hidden"data-order="3"><divclass="price"><spanclass="price__amount">57</span></div><!--/.price --></section><!--/.js-filter-results-plans --><sectionclass="js-filter-results-plans js-4-plan h-hidden"data-order="1"><divclass="price"><spanclass="price__amount">19</span></div><!--/.price --></section><!--/.js-filter-results-plans --><sectionclass="js-filter-results-plans js-4-plan h-hidden"data-order="2"><divclass="price"><spanclass="price__amount">11</span></div><!--/.price --></section><!--/.js-filter-results-plans --></section><!--/.js-filter-results -->