Question

How to fetch image icons from an Array & append one by one inside DIVs. I have an array with image path. I want to fetch images from that array & append one by one inside DIVs.

I want to append those icons in “class=acc_trigger” divs.. here is the HTML

<div class="container">

    <h2 class="acc_trigger"><a href="#">Home</a></h2>
    <div class="acc_container">
        <div class="block">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">One</a></li>
                <li><a href="#">One</a></li>
            </ul>

        </div>
    </div>

    <h2 class="acc_trigger"><a href="#">Req Mgmt</a></h2>
    <div class="acc_container">
        <div class="block">
                <ul>
                <li><a href="#">Requirments</a></li>
                <li><a href="#">Use Cases</a></li>
                <li><a href="#">Test Cases</a></li>
            </ul>         
        </div>
    </div>

    <h2 class="acc_trigger"><a href="#">Test</a></h2>
    <div class="acc_container">
      <div class="block">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">One</a></li>
                <li><a href="#">One</a></li>
            </ul>
        </div>
    </div>

    <h2 class="acc_trigger"><a href="#">Project</a></h2>
    <div class="acc_container">
        <div class="block">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">One</a></li>
                <li><a href="#">One</a></li>
            </ul>
        </div>
    </div>

</div>

*********** JQUERY ARRAY *****************


 var $iconLeft = new Array();
                $iconLeft[0] = 'images/icons/home_icon.gif';
                $iconLeft[1] = 'images/icons/reqMgmt_icon.gif';
                $iconLeft[2] = 'images/icons/test_icon.gif';
                $iconLeft[3] = 'images/icons/project_icon.gif';
                $iconLeft[4] = 'images/icons/issue_icon.gif';
                $iconLeft[5] = 'images/icons/more_icon.gif';

Should I use .each() ?? if so, how to use that? please help.

Answer 1

Try this out:

$(document).ready(function () {  
$('h2.acc_trigger').each(function(i){
  var icon = new Array;
  icon[0] = 'images/icons/home_icon.gif';
  icon[1] = 'images/icons/reqMgmt_icon.gif';
  icon[2] = 'images/icons/test_icon.gif';
  icon[3] = 'images/icons/project_icon.gif';
  icon[4] = 'images/icons/issue_icon.gif';
  icon[5] = 'images/icons/more_icon.gif';

  $(this).prepend('<img src='+icon[i]+' />');
  });                
});