How can I select image attribute (src) of img tags that don't belong to a specific class? 

Here's the HTML code 

```
<div class="content">
    <h1>Welcome to My Homepage</h1>
    <img src="#first">
    <img src="#second">    

    <p class="footer">
        <img src="#1">
        <img src="#2">
        <img src="#3">
    </p>

    <p id='test'> </p>
</div>

```

I have tried both **.not()** and **:not()** selector but I can't seem to make them work. How do I select image source of img tags that don't belong to the "footer" class.

This is what I have tried.

```
<script>
    var url = [];

    $(document).ready(function(){
        $('.content').filter(function() {
            var data = $(this);
            var image = data.find('img:not(".footer")');

            image.each(function(i,el) {
                url[i] = $(el).attr('src');
                $("#test").text(url);
            });
        })
    });
</script>

```