Question

I have multiple divs in my htmlthat needs to have an element added between the div and p

<div class="ui-state-error ui-corner-all">
 <p><b>Reversed</b></p>
</div>

what i want is the html to add the a span between the two

<div class="ui-state-error ui-corner-all">
<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>
 <p><b>Reversed</b></p>
</div>

But the functions ive tried have not been able to do this for each class once, if there are 13 classes, the function puts 13 s on each of the 13 classes, regardless if i just use a selector or an each(), insertBefore(), before(), after(), ect

here is what ive tried that hasnt worked

 <script type="text/javascript">        
       $(function () {                 
html = '<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span>';

           $('.ui-state-error').each(function(i){
                $('.ui-state-error').eq(i).before('p').append(html);
            });
        });
    </script>

Answer 1

Try this,

Live Demo

     $(function () {                 
html = '<span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;">your span</span>';

           $('.ui-state-error').each(function(i){
                $(this).prepend(html);           
            });

        });​