-1

我有以下 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>轻松找到's 的文本值：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>'stitle和src属性？如上面的代码所示，当前代码将它们返回为undefined. 提前致谢！

4

5 回答 5

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);
    });
});
于 2012-05-02T09:22:17.180 回答
0

这是一个缩短的版本。在这里，我利用其中的第二个参数$()来指定搜索的上下文。在这段代码中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);
}
于 2012-05-02T09:22:58.177 回答
0

尝试 -

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函数或将返回的值转换回“普通”Javscript DOM 对象应该可以解决您的问题。

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

于 2012-05-02T09:23:12.173 回答
0

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

var imageTitle = $(this).find('img').get(0).attr('title');
var imageSrc = $(this).find('img').get(0).attr('src');
于 2012-05-02T09:23:22.103 回答
0

您正在使用 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 中工作，因为它有单个图像。

于 2012-05-02T09:59:20.733 回答