Добавление класса к первому элементу в списке с использованием javascript

Question

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

У меня проблемы с этим.

Я хочу добавить границу вокруг первого элемента в списке на страницах нашей категории, но только на первой странице, а не на следующих страницах. Правильно ли я это делаю? Я не могу заставить его работать, и похоже, что это сработает.

Answer 1

Принимая во внимание то, что вы пытаетесь сделать, см. Ниже. Кроме того, я удаляю встроенный стиль из своего 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}}'); 
       ; 
      } 
     } 
    });