-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>簡単に見つけることができます。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>を取得するにはどうすればよいですか? 上記のコードに示されているように、現在のコードはそれらを として返します。前もって感謝します！titlesrcundefined

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

ここに短縮版があります。$()ここでは、検索のコンテキストを指定するの 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);
}
于 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を持たないjQueryでラップされたDOM要素を返すことだと思います。jQuery の関数を使用するか、戻り値を「プレーン」な JavaScript DOM オブジェクトに戻すと、問題が解決するはずです。titlesrcattr

デモ - http://jsfiddle.net/PSzE3/

于 2012-05-02T09:23:12.173 に答える
0

1 つだけを選択してその値/属性にアクセスするのではなく、すべての画像を選択しています。試す：

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 に答える