按字母顺序排序元素类属性

时间:2013-10-04 08:17:35

标签: jquery class sorting attributes alphabetical

我需要按字母顺序对“A”元素的类属性进行排序。目的是创建lightview组。

我使用这个脚本来获取每个“DIV”元素的类并将其放到“A”元素中。请注意,几个“DIV”有不同的类。

我可以使用或不使用空格来连接类。所以我可以在每个类之间放置一个空格,用于对此之后的srcipt进行排序,或者可能有人为该脚本提供直接解决方案吗?

脚本

$(function(){
    $('div.level_1').find('.lightview').attr('data-lightview-group', function () {
        return $(this).closest('.level_1')[0].className.split(" ").slice(0).join("");
    });
});

此脚本后的结果代码

<div class="euItem generation_y _2013 level_1">
    <img border="0" src="/sport/sport_2014/gallery/images/images_thumbnails/bike-tbn.jpg" class="euImg" alt="Bike">
    <h4>
        <a href="/sport/sport_2014/gallery/images/bike.jpg" class="link-ico lightview" data-lightview-group-options="controls: 'thumbnails'" data-lightview-group="euItemgeneration_y_2013level_1"><span>Bike</span></a>
    </h4>

    <p>Praesent placerat purus in lobortis egestas. Etiam lectus augue, viverra in ultricies vitae, accumsan eu arcu. Phasellus auctor fringilla sem non imperdiet.</p>

    <span class="clear">&nbsp;</span>
</div>

<div class="level_1 euItem eu_sport_forum _2013">
    <img border="0" src="/sport/sport_2014/gallery/images/images_thumbnails/relay-tbn.jpg" class="euImg" alt="Relay">
    <h4>
    <a href="/sport/sport_2014/gallery/images/relay.jpg" class="link-ico lightview" data-lightview-group-options="controls: 'thumbnails'" data-lightview-group="level_1euItemeu_sport_forum_2013"><span>Relay</span></a>
    </h4>

    <p>Praesent placerat purus in lobortis egestas. Etiam lectus augue, viverra in ultricies vitae, accumsan eu arcu. Phasellus auctor fringilla sem non imperdiet.</p>
    <span class="clear">&nbsp;</span>
</div>

<div class="level_1 _2013 generation_y euItem">
    <img border="0" src="/sport/sport_2014/gallery/images/images_thumbnails/bike-tbn.jpg" class="euImg" alt="Bike">
    <h4>
        <a href="/sport/sport_2014/gallery/images/bike.jpg" class="link-ico lightview" data-lightview-group-options="controls: 'thumbnails'" data-lightview-group="level_1_2013generation_yeuItem"><span>Bike</span></a>
    </h4>

    <p>Praesent placerat purus in lobortis egestas. Etiam lectus augue, viverra in ultricies vitae, accumsan eu arcu. Phasellus auctor fringilla sem non imperdiet.</p>

    <span class="clear">&nbsp;</span>
</div>

<div class="level_1 euItem eu_sport_forum _2013">
    <img border="0" src="/sport/sport_2014/gallery/images/images_thumbnails/relay-tbn.jpg" class="euImg" alt="Relay">
    <h4>
    <a href="/sport/sport_2014/gallery/images/relay.jpg" class="link-ico lightview" data-lightview-group-options="controls: 'thumbnails'" data-lightview-group="level_1euItemeu_sport_forum_2013"><span>Relay</span></a>
    </h4>

    <p>Praesent placerat purus in lobortis egestas. Etiam lectus augue, viverra in ultricies vitae, accumsan eu arcu. Phasellus auctor fringilla sem non imperdiet.</p>
    <span class="clear">&nbsp;</span>
</div>

0 个答案:

没有答案