Iterate over html elements with same class using .each
<p>I have some div elements with the same class. I want to iterate through them. I am using jquery ".each" in order to do it. I also want to access each element individually and toogle its class so I need to get the index of the element within the class elements array. I currently have a code similar to this:</p>

<pre><code> $('.the_div_class').each(function(i, obj) {

   if("a certain condition") {

    $('.the_div_class')[0].toggleClass('other_div_class'); // trying to access the index 0 of the array that contains the elements of that class;

   }

 }
</code></pre>

<p>However I receive an error saying "$(...)[0].toggleClass is not a function". If I don't specify an index I toogle all the elements of the array... I console.log the "$('.the_div_class')" array and get a structure similar to this:</p>

<pre><code>[div.the_div_class, div.the_div_class, div.the_div_class, div.the_div_class, div.the_div_class, prevObject: r.fn.init[1]]
</code></pre>

<p>And if I console.log "$('.the_div_class')[0]" I get this:</p>

<pre><code>&lt;div class="the_div_class"&gt;
</code></pre>

<p>Why doesn't it work and what should I do in order to make it work?</p>