Question

我有以下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>

在我的jQuery / JS函数中，我获得了<ul>元素（及其<li>个子元素），我可以使用以下代码轻松找到p.detailTitle的文本值：

$("#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);
    }
}

如何获取<img>的{{1}}和title属性？如上面的代码所示，当前代码将它们返回为src。提前谢谢！

Answer 1

使用.attr()

参考：http://api.jquery.com/attr/

工作代码：

$("#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);
    });
});

Answer 2

这是一个缩短版本。在这里，我利用$()的第二个参数来指定搜索的上下文。在此代码的each()中，this的值是当前迭代中的DOM元素li。我们使用this作为我们的“基础”来缩小搜索范围，而不是使用find()。

$("#showDropZone ul > li").each(function() {

    var detailTitle = $("p.detailTitle", this).text(); //find detailTitle in <li>
    var img = $("img", this);                          //find img in <li>
    var imageTitle = img.attr('title'); 
    var imageSrc = img.attr('src');

    alert(detailTitle);
    alert(imageTitle);
    alert(imageSrc);
}

Answer 3

尝试 -

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

或

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

我认为您的问题是find函数将返回一个没有title或src属性的jQuery包装DOM元素。使用jQuery的attr函数或将返回的值转换回＆＃39; plain＆＃39; Javscript DOM对象应该可以解决您的问题。

演示 - http://jsfiddle.net/PSzE3/

Answer 4

您正在选择所有图像，而不是仅选择一个图像并访问其值/属性。尝试：

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

Answer 5

您正在使用jQuery find函数返回结果数组而不是单个元素。想想你的html中有5个img标签的情况，你说jQuery带来img并显示它的标题!!! ...

所以更新你的脚本代码，如

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

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

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

    // wollaaaa working exactly...
    alert(imageTitle);
    alert(imageSrc);
    });

});
});

或者，如果您只想测试代码，请使用

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

这将在上面的html中工作，因为它有单个图像。

jQuery无法找到嵌套图像

5 个答案: