Question

I have the following HTML:

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

In my jQuery/JS function I obtain the <ul> element (and its <li> children) and I can easily find the p.detailTitle‘s text value with the following 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);
    }
}

How do I get the <img>‘s title and src attributes? As indicated in the code above, the current code returns them as undefined. Thanks in advance!

Answer 1

Use .attr()

Refer: http://api.jquery.com/attr/

Working Code:

$("#showDropZone").find("ul").each(function() {

alert($(this).html());
    $(this).find("li").each(function() {
        var detailTitle = $(this).find("p.detailTitle").text();

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

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

        // But these both print "undefined"...
        alert(imageTitle);
        alert(imageSrc);
    });
});