unable to apply a function on every img within a div

Question

i'm trying to blur every image within a DIV, but for no reason, it just doesn't work

<div id="textarea"  >random HTML with imgs</div>
                         <script type="text/javascript">
                            var arraysOfImgs = $('#textarea').find('img').map(function(){
                                return this.id;
                            }).get();
                            for (var i = 0; i < arraysOfImgs.length; i++){
                                Pixastic.process(arraysOfImgs[i], "blurfast", {
                                    amount : '1.5'
                                });
                            }

                        </script>';

even this didn't work out

<script type="text/javascript">
                         $(document).ready(function() {
                            var arraysOfImgs = $('#textarea').find(\'img\').map(function(){
                                return this.id;
                            }).get();

                            $.each(arraysOfImgs, function() {
                                Pixastic.process(this, "blurfast", {
                                    amount : '1.5'
                                });
                            });
                        }); 
                        </script>

no error is being shown, nothing happens when i load the page...

EDIT : no more php echo..

Answer 1

The problem I think is that you're passing the images' ID values. Pixastic (if it's this one) needs the image element.

Your code might look like this:

$('#textarea img').each(function() {
    Pixastic.process(this, "blurfast", {
        amount : '1.5'
    });
});

---

Note also that Pixastic provides a jQuery plugin, so you can just do this:

$('#textarea img').pixastic('blurfast', {amount: 1.5});