jQuery can't find nested image
<p>I have the following HTML:</p>

<pre><code>&lt;div id="showDropZone" class="ui-droppable" style="position: absolute; z-index: 1; outline-style: none; left: 0px; width: 379px; height: 500px;"&gt;
    &lt;div id="introText" style="display: none;"&gt;Drag and drop program images here&lt;/div&gt;
        &lt;ul class="gallery ui-helper-reset"&gt;
            &lt;li class="imgThumbLi ui-draggable imageSelected" title="File Name: drago.jpg Dimension: 225x225 Size: 7 KB" style="display: list-item;"&gt;
                &lt;img class="image" src="/myApp/2012/5/1/1335900424140/39345e7f3d12487bb6e347e786194c9b" title="File Name: drago.jpg Dimension: 225x225 Size: 7 KB"&gt;
                &lt;div class="imageInfo"&gt;
                    &lt;p class="detailTitle"&gt;Logo!&lt;/p&gt;
                &lt;/div&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>In my jQuery/JS function I obtain the <code>&lt;ul&gt;</code> element (and its <code>&lt;li&gt;</code> children) and I can easily find the <code>p.detailTitle</code>'s text value with the following code:</p>

<pre><code>$("#showDropZone").find("ul").each(function() {
    $(this).find("li").each(function() {
        var detailTitle = $(this).find("p.detailTitle").text();

        // This prints "Logo!" correctly...
        alert(detailTitle);

        var imageTitle = $(this).find("img").title;
        var imageSrc = $(this).find("img").src;

        // But these both print "undefined"...
        alert(imageTitle);
        alert(imageSrc);
    }
}
</code></pre>

<p>How do I get the <code>&lt;img&gt;</code>'s <code>title</code> and <code>src</code> attributes? As indicated in the code above, the current code returns them as <code>undefined</code>. Thanks in advance!</p>
