CODEWITHSUNDEEP
javascriptfiltering
Matt Rogers
Matt Rogers

Reputation: 156

filtering and sorting divs

I have been looking for a robust and simple way to sort my casestudies but after a couple of hours and a search of stack overflow i could not find a way to filter casestudies the way I want.

Basically I will give each casestudy three categories (year produced, type of project and name) using css classes, for example the markup would look something like this

<div class="name1 home 2013"></div>
<div class="name2 work 2012"></div>
<div class="name3 home 2012"></div>
<div class="name4 charity 2012"></div>
<div class="name5 home 2010"></div>
<div class="name6 work 2007"></div>

Then I want to have buttons so you can choose which category you want to sort the casestudies by. So something like.

<div class="button" id="year">Sort by Year</div>
<div class="button" id="alpha">sort Alphabetically</div>
<div class="button" id="type">sort by type</div>

This is where I am getting stuck. What javascript function can i create so that if you click the button "sort by year" it will create a mark up that looks like this. eg sorting all the casestudies in to divs with casestudies of the same year.

<div>
   <div class="name1 home 2013"></div>
</div>

<div>
<div class="name2 work 2012"></div>
<div class="name3 home 2012"></div>
<div class="name4 charity 2012"></div>
</div>

<div>
<div class="name5 home 2010"></div>
</div>

<div>
<div class="name6 work 2007"></div>
</div>

Upvotes: 1

Views: 827

Answers (1)

Declan Cook
Declan Cook

Reputation: 6126

I would use data attributes to make the filtering easier.

<div class="name1 home" data-year="2013">2013</div>
<div class="name2 work" data-year="2012">2012</div>
<div class="name3 home" data-year="2012">2012</div>
<div class="name4 charity" data-year="2012">2012</div>
<div class="name5 home" data-year="2010">2010</div>
<div class="name6 work" data-year="2007">2007</div>

The using JQuery and array.map (could be replaced with a foreach if you want older browser support)

var studies = $('[data-year]')

studies.map(function(index, el) {
    var $el = $(el)
    year = $el.attr('data-year')
    if($('#' + year).length == 0){
        $(document.body).append(
            $('<div>').attr('id', year)
            .css('margin-bottom', '20px')
        )
    }

    $('#' + year).append(el)
 })

what this does is take all the elements with a data-year attribute, foreach element check to see if a div with the id of that elements year exists. If it doesn't create one and append it to the body. Then it appends the element into the year container.

see this jsfiddle

Upvotes: 2

Related Questions