的jQuery找不到嵌套的圖像

-1

<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>的title和src屬性？如上面的代碼所示，當前的代碼將它們返回爲undefined。提前致謝！

來源

2012-05-02 IAmYourFaja

使用.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-02 09:22:17 Niranjan

下面是一個縮短版。在這裏，我利用$()的第二個參數來指定搜索的上下文。在此代碼的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-02 09:22:58 Joseph

嘗試 -

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函數會返回一個jQuery包裹不具有title或src性能DOM元素。使用jQuery的attr函數或將返回的值轉換回'plain'Javscript DOM對象應該可以解決您的問題。

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

來源

2012-05-02 09:23:12 ipr101

您選擇的所有圖像，而不是選擇只有一個，並訪問其值/屬性。嘗試：

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

來源

2012-05-02 09:23:22

您正在使用jQuery查找函數，它返回結果數組而不是單個元素。認爲案件時有你的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-02 09:59:20

的jQuery找不到嵌套的圖像

回答

相關問題