使用javascript将类添加到列表中的第一项

时间:2015-03-04 21:36:59

标签: javascript jquery

if ((location.search.indexOf('page=') < 0) || (location.search.indexOf('page=1') > 0) {
    if (($('select.sort-by option:selected').text() == "Most Popular") || ($('select.sort-by option:selected').text() == "Best Selling")) {
        $('li.collection-indv-product:first').css('border', '#ffc000 solid 10px');
        $("li.collection-indv-product:first").find('div.collection-product').before('<div style="background:#ffc000;text-align:left;padding: 0 0 5px 5px;color:#353535;font-weight:bold;font-size:1.3em;">Customer Favorite in {{collection.title}}</div>');
    }
} 

我对此有疑问。

我想在类别页面的列表中的第一个项目周围添加边框,但仅限于第一页,而不是以下页面。我这样做了吗?我无法让它工作,看起来这样可行。

1 个答案:

答案 0 :(得分:0)

尝试一下你可能想做的事情,见下文。另外,我会从你的DIV中删除内联样式并给它一个类,将样式移动到样式表。它更清洁,更容易维护。

话虽如此,这是一个建议:

    $(function () {
        function getPage() {
            var query = location.search;
            if (query != '') {
                // this gets 'page' anywhere in the querystring
                var qs = query.substr(1).split('&');
                for (k in qs) {
                    if (qs[k].indexOf('page') == 0) {
                        var page = qs[k].split('=')[1];
                        return page;
                    }
                }
            }
            return null;    // page wasn't found
        }

        if (getPage() == '1') {
            var sort = $('select.sort-by :selected').val();
            if (sort == 'Most Popular' || sort == 'Best Selling') {
                // use .first() and chaining for performance
                var li = $('li.collection-indv-product').first();
                li.css('border', '#ffc000 solid 10px')
                    .find('div.collection-product').before('<div style="background:#ffc000;text-align:left;padding: 0 0 5px 5px;color:#353535;font-weight:bold;font-size:1.3em;"/>').text('Customer Favorite in {{collection.title}}');
                ;
            }
        }
    });