Jquery optimisation

Question

I made an animation with jquery and I find myself with 15400 line of code. I have 26 div (images) with IDs: .article1, article2, .article3, .article4, ... article26. When I click on one of them lot of translation will be applied on the others. I want to decrease the number of code lines, i tried a For loop:

for (var i = 1 ; i<=26 ; i++)
{
    $('.article' + i]).click(function(){
         -- animations --
    }
}

But it seems don't work because the value of i will take the last value of the loop (26) so the click function will work only on the div with id .article26.

Thank you.

Do you need `i` in your `-- animations --`? You could just use `$(this)` — 4castle, Jul 01 '16 at 15:05
Look at the jQuery **not** selector to select everything **not this**. Also you say you are using IDs but all of those articles are expressed as classes. Is this a typo? That could potentially cause an issue, too. — P Smith, Jul 01 '16 at 15:05
I assume `$('.article' + i])` only has a syntax error here (note the `]`). Does that exist in your real code? — Mulan, Jul 01 '16 at 15:06
Right, like @4castle said... to select **this** thing, use **this**... but to select everything ELSE, use **not** this or either remove classes from THIS only. — P Smith, Jul 01 '16 at 15:06
@4castle I just need the "i" for the name of the class .article1, .article2, etc... When i use the for loop my click function work only on the last .article — Jrb Youssef, Jul 01 '16 at 15:09
Get elements by class name using jQuery like `$('[class^=article]')`. Then bind event `$('[class^=article]').click(function() { /* Do something here. */ })`. — Anson, Jul 01 '16 at 15:09
@JrbYoussef If you need to know the class of the element, use `$(this).attr("class")` — 4castle, Jul 01 '16 at 15:11
Ill try the $('[class^=article]') Ill post a gif of the animation. — Jrb Youssef, Jul 01 '16 at 15:17
This is a gif of the animation: https://scontent-mrs1-1.xx.fbcdn.net/v/t34.0-12/13552718_10208420797871537_1472890127_n.gif?oh=2248f63c2ca750642bf136b5b6d042ef&oe=5778956B — Jrb Youssef, Jul 01 '16 at 15:20

score 0 · Accepted Answer · answered Jul 01 '16 at 15:10

this could be a way to manage an animation over many different named elements...

function AnimationCtrl($) {
  var els = $('[class^="article"]');
  
  els.click(function(event) {
    $(this).toggleClass('is-active');
  });
}

jQuery(document).ready(AnimationCtrl);

[class^="article"] {
  padding: .5em 1em;
  background: cyan;
  border: 1px solid lightseagreen;
  display: inline-block;
  margin: .2em .5em;
  cursor: pointer;
  transition: 500ms all linear;
} 

.is-active[class^="article"] {
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article-1">elemnt number 1</div>
<div class="article-2">elemnt number 2</div>
<div class="article-3">elemnt number 3</div>
<div class="article-4">elemnt number 4</div>
<div class="article-5">elemnt number 5</div>
<div class="article-6">elemnt number 6</div>
<div class="article-7">elemnt number 7</div>
<div class="article-8">elemnt number 8</div>
<div class="article-9">elemnt number 9</div>
<div class="article-10">elemnt number 10</div>
<div class="article-11">elemnt number 11</div>
<div class="article-12">elemnt number 12</div>
<div class="article-13">elemnt number 13</div>
<div class="article-14">elemnt number 14</div>
<div class="article-15">elemnt number 15</div>
<div class="article-16">elemnt number 16</div>
<div class="article-17">elemnt number 17</div>
<div class="article-18">elemnt number 18</div>
<div class="article-19">elemnt number 19</div>
<div class="article-20">elemnt number 20</div>
<div class="article-21">elemnt number 21</div>
<div class="article-22">elemnt number 22</div>
<div class="article-23">elemnt number 23</div>
<div class="article-24">elemnt number 24</div>
<div class="article-25">elemnt number 25</div>
<div class="article-26">elemnt number 26</div>

Jquery optimisation

1 Answers1