on load event Добавить изображения в разные классы

Question

Я хочу добавить изображения в разные классы при загрузке изображений. это скрипка. http://jsfiddle.net/simmi_simmi123/Kxfg7/2/

<img src="http://placehold.it/10x60" /><br /> 
<img src="http://placehold.it/20x50" /><br /> 
<img src="http://placehold.it/30x40" /><br /> 
<img src="http://placehold.it/40x30" /><br /> 
<img src="http://placehold.it/50x20" /><br /> 
<img src="http://placehold.it/60x10" /><br /> 


$(function(){ 
    $('img').addClass('brdr1'); 
}); 

В этом я добавляю все изображения в brdr1 один, но я хочу, чтобы добавить 3 изображения в brdr1 и оставаясь в brdr2

Как это сделать. Заранее спасибо

Answer 1

Рабочая демо: http://jsfiddle.net/mohammadAdil/Kxfg7/8/

$(function(){ 
    $('img:lt(3)').addClass('brdr1'); 
    $('img:gt(2)').addClass('brdr2'); 
}); 

http://api.jquery.com/gt-selector/

http://api.jquery.com/lt-selector/

Answer 2

$('#theDiv').prepend('<img id="theImg" src="theImg.png" />') 

Answer 3

добавить класс, чтобы указать, какие изображения применить какой класс

HTML

<img class="b1" src="http://placehold.it/10x60" /><br /> 
<img class="b1" src="http://placehold.it/20x50" /><br /> 
<img class="b1" src="http://placehold.it/30x40" /><br /> 
<img class="b2" src="http://placehold.it/40x30" /><br /> 
<img class="b2" src="http://placehold.it/50x20" /><br /> 
<img class="b2" src="http://placehold.it/60x10" /><br /> 

CSS

.brdr{border:1px solid red} 
.brdr11{border:1px solid blue} 

JQuery

$(function(){ 
    $('.b1').addClass('brdr'); 
    $('.b2').addClass('brdr1'); 
}); 

Рабочая Демонстрационный http://jsfiddle.net/cse_tushar/Kxfg7/5/

Answer 4

Дайте b1 и b2 (классы) для соответствующих изображений, то, просто добавить собственные классы CSS для соответствующих изображений, как это на onload() в JQuery, как этот

$(document).ready(function(){ 

    $('.b1').addClass('brdr1'); 
    $('.b2').addClass('brdr2'); 
});