Como fazer para script colocar classe automaticamente?

[Anderson Anizio 0]

Pessoal estou desenvolvendo um site e não sei lá essas coisas de script, então estou com um impasse, veja o que tenho:

 

Estou com uma galeria de imagem gerada por script (as imagens são puxadas de um outro site). Tenho uma div principal que envolve as imagens, as quais tem definido uma padding para separá-las, o problema é como definir para que a última imagem não tenha a padding.

 

Minha dúvida então é como faço para que o script conte por exemplo 3 imagens em cada fileira e nessa última ele ponha a classe 'last-img'.

 

O código que estou tentando adicionar essa função é do Instagram, vejam:

 

(function($){
 $.fn.instagram = function(options) {
   var that = this,
       apiEndpoint = "https://api.instagram.com/v1",
       settings = {
           hash: null
         , userId: null
         , locationId: null
         , search: null
         , accessToken: null
         , clientId: null
         , show: null
         , onLoad: null
         , onComplete: null
         , maxId: null
         , minId: null
         , next_url: null
       };

   options && $.extend(settings, options);

   function createPhotoElement(photo) {
     return $('<a>')
  		.attr('href', photo.link)
           .attr('target', '_blank')
           .append(
             $('<img>')
               .attr('src', photo.images.thumbnail.url)
			.addClass('instagram-place')
           )
   }

   function createEmptyElement() {
     return $('<div>')
       .addClass('instagram-place')
       .attr('id', 'empty')
       .append($('<p>').html('Ops! No photos...'));
   }

   function composeRequestURL() {

     var url = apiEndpoint,
         params = {};

     if (settings.next_url != null) {
       return settings.next_url;
     }

     if(settings.hash != null) {
       url += "/tags/" + settings.hash + "/media/recent";
     }
     else if(settings.search != null) {
       url += "/media/search";
       params.lat = settings.search.lat;
       params.lng = settings.search.lng;
       settings.search.max_timestamp != null && (params.max_timestamp = settings.search.max_timestamp);
       settings.search.min_timestamp != null && (params.min_timestamp = settings.search.min_timestamp);
       settings.search.distance != null && (params.distance = settings.search.distance);
     }
     else if(settings.userId != null) {
       url += "/users/" + settings.userId + "/media/recent";
     }
     else if(settings.locationId != null) {
       url += "/locations/" + settings.locationId + "/media/recent";
     }
     else {
       url += "/media/popular";
     }

     settings.accessToken != null && (params.access_token = settings.accessToken);
     settings.clientId != null && (params.client_id = settings.clientId);
     settings.minId != null && (params.min_id = settings.minId);
     settings.maxId != null && (params.max_id = settings.maxId);

     url += "?" + $.param(params)

     return url;
   }

   settings.onLoad != null && typeof settings.onLoad == 'function' && settings.onLoad();

   $.ajax({
     type: "GET",
     dataType: "jsonp",
     cache: false,
     url: composeRequestURL(),
     success: function(res) {
       var length = typeof res.data != 'undefined' ? res.data.length : 0;
       var limit = settings.show != null && settings.show < length ? settings.show : length;

       if(limit > 0) {
         for(var i = 0; i < limit; i++) {
           that.append(createPhotoElement(res.data[i]));
         }
       }
       else {
         that.append(createEmptyElement());
       }

       settings.onComplete != null && typeof settings.onComplete == 'function' && settings.onComplete(res.data, res);
     }
   });

   return this;
 };
})(jQuery);

[William Bruno 1501]

você pode utilizar o seletor css3: :nth-child (ai faz direto no css, em mexer no js)

[Anderson Anizio 0]

Caramba nunca tinha ouvido falar nessa classe, bem interessante o funcionamento dela, mas como faria para que ela funcionasse em navegadores mais antigos?

 

De qualquer forma, valeu, vou testar aqui!

[William Bruno 1501]

se você precisa de suporte nos antigos, use ela no teu jQuery... a lib jQuery já faz a compatibilidade para ti.

 

 

jQuery('elemento:nth-child(3n)').css(...

[Anderson Anizio 0]

William,

valeu mesmo pela ajuda, mas não sei o que está havendo que não consigo ver a classe em funcionamento. Estou fazendo da seguinte forma:

 

.instagram-place:nth-child(3n+3) {
margin-right:0;
}

 

Estou criando o site localmente em meu PC acessando o Chrome... Essa técnica só funciona em tabelas?

[William Bruno 1501]

funciona em qualquer tag... como é o teu html ?

 

você pode usar apenas o 3n.. não precisa do +3.

[Anderson Anizio 0]

William,

o meu HTML tá assim (o código que o script gera):

 

<div id="instagram">
                                       <a href="http://instagr.am/p/OplldiOBOA/" target="_blank"><img src="http://distilleryimage8.s3.amazonaws.com/046eea44ecb611e1880f22000a1e8a70_5.jpg" class="instagram-place"></a>
                                       <a href="http://instagr.am/p/OpgwWuQFlG/" target="_blank"><img src="http://distilleryimage6.s3.amazonaws.com/1f1fda0cecb011e1a3b222000a1e9fb4_5.jpg" class="instagram-place"></a>
                                       <a href="http://instagr.am/p/OpmEfei64O/" target="_blank"><img src="http://distilleryimage2.s3.amazonaws.com/9bf3056cecb611e1876222000a1de29f_5.jpg" class="instagram-place"></a>
                                       <a href="http://instagr.am/p/OpaSxtCRKP/" target="_blank"><img src="http://distilleryimage3.s3.amazonaws.com/3bb3ae8aeca811e197621231381b4865_5.jpg" class="instagram-place"></a>
                                       <a href="http://instagr.am/p/OpXnVApuXz/" target="_blank"><img src="http://distilleryimage11.s3.amazonaws.com/f68c9388eca411e18c261231381b5c32_5.jpg" class="instagram-place"></a>
                                       <a href="http://instagr.am/p/OpeYLdrEEV/" target="_blank"><img src="http://distilleryimage5.s3.amazonaws.com/38135b2cecad11e1a2ce22000a1c86dc_5.jpg" class="instagram-place"></a>
                                       <a href="http://instagr.am/p/OpmgThBQiF/" target="_blank"><img src="http://distilleryimage5.s3.amazonaws.com/23c10db8ecb711e19f0012313814105b_5.jpg" class="instagram-place"></a>
                                       <a href="http://instagr.am/p/OpglerqiWi/" target="_blank"><img src="http://distilleryimage2.s3.amazonaws.com/ea0520f2ecaf11e19e9622000a1c9e07_5.jpg" class="instagram-place"></a>
                                       <a href="http://instagr.am/p/Opg4OUhMHz/" target="_blank"><img src="http://distilleryimage7.s3.amazonaws.com/458a4aececb011e1bf7c22000a1e9ddc_5.jpg" class="instagram-place"></a>
                                   </div>

 

E o CSS...

 

.instagram-place {
float:left;
width:61px;
height:auto;
border:2px solid #4a4a4a;
margin:0 5px 5px 0;
}
.instagram-place:nth-child(3n+3) {
margin-right:0;
}

 

Continuo sem conseguir... Não tem como fazer o mesmo por script?