Re-write Javascript code into jQuery

Question

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.

Wow. Where does such a contorted mess as this even come from? — Matt Ball
– Matt Ball, Commented Oct 3, 2012 at 17:16
^ Yup lol. ;) @MattBall, see: gist.github.com/1129073. I've changed the getElementById to getElementsByClassName because I want it to apply to many classes instead of just one id. — Steve
– Steve, Commented Oct 3, 2012 at 17:21

3dgoo · Accepted Answer · 2012-10-04 01:07:40Z

2

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/

edited Oct 4, 2012 at 1:07

answered Oct 4, 2012 at 0:20

3dgoo

15.8k6 gold badges49 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Database_Query · Accepted Answer · 2012-10-03 17:16:24Z

0

it will also work

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

answered Oct 3, 2012 at 17:16

Database_Query

6444 silver badges14 bronze badges

2 Comments

Steve Over a year ago

Should have been more specific as to what the code is designed to accomplish, please see my updated question above.

Ben Sewards Over a year ago

^ i just laughed my ass off at that jsfiddle

Huangism · Accepted Answer · 2012-10-03 17:27:12Z

0

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

answered Oct 3, 2012 at 17:27

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

1 Comment

Steve Over a year ago

Thank you for your response. I understand the use of CSS selectors in jQuery, but how do I wrap the function inside a class selector target? Please re-read my question to understand what I am trying to accomplish.

Collectives™ on Stack Overflow

Re-write Javascript code into jQuery

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related