Question

我一直在寻找一种强大而简单的方法来对我的案例研究进行排序，但经过几个小时的搜索和堆栈溢出后，我找不到按照我想要的方式过滤casestudies的方法。

基本上我将使用css类给每个案例研究三个类别（年份，项目类型和名称），例如标记看起来像这样

<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>

然后我想要按钮，以便您可以选择要对案例研究进行排序的类别。就像这样。

<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>

这是我陷入困境的地方。我可以创建什么javascript函数，以便如果单击“按年排序”按钮，它将创建一个看起来像这样的标记。例如，将所有casestudies分类到具有同年案例研究的div中。

<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>

Answer 1

我会使用数据属性来简化过滤。

<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>

使用JQuery和array.map（如果你想要更旧的浏览器支持，可以用foreach替换）

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)
 })

这样做的所有元素都带有data-year属性，foreach元素检查以查看是否存在id为该元素year的div。如果它没有创建一个并将其附加到身体。然后它将元素追加到年份容器中。

see this jsfiddle

过滤和排序div

1 个答案: