anam
anam

Reputation: 3913

on load event add images to different classes

i want to add images into different classes on load of images. this is fiddle . 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');
});

In this i am adding all images into brdr1 one but i want to add 3 images in brdr1 and remaining in brdr2

How to do this. Thanks in advance

Upvotes: 2

Views: 145

Answers (4)

dreamweiver
dreamweiver

Reputation: 6002

Give b1 and b2(classes) for respective images then, just add proper css classes for respective images like this on onload() in jquery like this

$(document).ready(function(){

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

Upvotes: 0

Adil Shaikh
Adil Shaikh

Reputation: 44740

Working demo : 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/

Upvotes: 1

add class to specify which images to apply which class

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

Working Demo http://jsfiddle.net/cse_tushar/Kxfg7/5/

Upvotes: 1

user2266451
user2266451

Reputation:

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

Upvotes: 0

Related Questions