CODEWITHSUNDEEP
javascriptjquery
Steve
Steve

Reputation: 5166

Re-write Javascript code into jQuery

How do I write the code below in jQuery and have it apply to all elements w/ class name of something. I am trying to get https://gist.github.com/1129073 to apply to multiple elements, specified by class, instead of just a single element, targeted by id.

More specifically, I'm looking at http://jsfiddle.net/fgnass/9BkjZ/ and trying to make it work on classes instead of just an id, so it can be applied to many elements.

(function(a,b,c){
  setInterval(function(){
    for(
      b=0;
      b<8;c||(a.innerHTML+='<i><b>'),
      a.childNodes[b].style.opacity=(++b-~c)%8*.1+.2);
    c=-~c
  },99)
})(document.getElementsByClassName('something'));

The code above only works on the first element w/ class name of someting when using })(document.getElementsByClassName('something')[0]); as the last line.

Upvotes: 2

Views: 136

Answers (3)

3dgoo
3dgoo

Reputation: 15794

This bit of jQuery should do the same thing as your javascript. 

$('.something').each(function() {
    for (i = 0; i < 8; i++) 
    {
        $(this).append('<b class="b' + i + ' o' + i + '" data-opacity="' + i + '"><i>•</i></b>');
    }
});

setInterval(function() {
    $('.something b').each(function () {
        $(this).removeClass('o' + $(this).attr('data-opacity'));
        $(this).attr('data-opacity', (parseInt($(this).attr('data-opacity')) + 1) % 8);
        $(this).addClass('o' + $(this).attr('data-opacity'));
    });
}, 99);

You may also want to have a look at the following which also create a loading spinner without using an image:
http://fgnass.github.com/spin.js/
http://cssload.net/
http://www.jquery4u.com/animation/10-css3-jquery-loading-animations-solutions/

Upvotes: 2

Huangism
Huangism

Reputation: 16438

To explain a little bit

$('.something').fadeIn();

taken from SLaks answer

$('.something')

will grab all the elements with .something class, and fadeIn() is a build-in jquery method which will change the opacity of the element in question from 0 to 1. Please note, if your element has an opacity of 1 and you call fadeIn, I think it will flicker and fade in. There are lots of other jquery utilities other than fadeIn which can be found on jquery website.

$('SELECTOR')

SELECTOR can be any css selector, for example

$('#myID .something')
$('#myID > .something')
$('#myID .something:first-child')
$('div.className #myid')

Upvotes: 0

Database_Query
Database_Query

Reputation: 634

it will also work 

$('.something').show();

Upvotes: 0

Related Questions