0

クリックしたアイテムのリストを作成するために、見出しのテキストと画像要素のソースを取得するのに問題がありますので、手を貸してください。しかし、私はいくつかのコードでよりよく説明します：

まず、次のようなdiv要素があります。

<div class="main_page_entry">
    <div class="main_item_desc">
        <img class="main_item_pic" src="blah.jpg" />
        <h6><a href="blah.html">Item Title</a></h6>
        <span class="icon"> <img src="icon.png" /></span><br />            
        <span class="address">Some address</span>
        <p class="item_desc">More blahs and links for description </p>
    </div>

    <div class="item_controls">
        ...
        <a href="#" class="add_to_list">
            <img src="add_icon.gif" />Add to List
        </a>
        ...
    </div>  
</div>

これは、2つの小さなdivを含む大きなdivで構成されています。私がやりたいことは次のとおりです。[リストに追加]リンクをクリックすると、内部のテキストとmain_item_picソースだけを取得して、これら2つのリストアイテムを作成したいと思います。

これまでに書いたコードは次のとおりです。

$('a.add_to_list').live('click', function() {
    var name = $(this).closest('h6').text();
    var source = $(this).closest('.main_item_pic').src;

    $('<li class="hide list_entry"><span class="entry_title">'+
        name+'</span><button class="remove_entry"></button>'+
        '<img class="list_entry" src="'+source+'" /></li>')
        .appendTo('#favs_list ul')
        .show('slow');
});

明らかにこれは機能しません！私はここで読んださまざまな解決策を試しました：

var name = $(this).closest('h6').html();
var source = $(this).closest('.main_item_pic').attr('src');

しかしまあ...今のところ運がない。何か案は？前もって感謝します！

4

4 に答える 4

2

一番上に戻って、右側のDOMブランチに沿ってもう一度降りてみてください。

var src = $(this).closest('.main_page_entry')               // Back to the top
                 .find('.main_item_desc .main_item_pic')    // And down again.
                 .attr('src');

このclosestメソッドは、祖先を介してDOMツリーを上っていきます。

現在の要素から始まり、DOMツリーを上に向かって、セレクターに一致する最初の祖先要素を取得します。

したがって、兄弟ブランチのいずれにも交差しません。次に、適切な祖先に到達したら、find元に戻るために使用します。これは、ルートとしてではなく、指定された要素を使用するのfindと同じです。$()document

セレクター、jQueryオブジェクト、または要素によってフィルター処理された、一致した要素の現在のセット内の各要素の子孫を取得します。

于 2011-06-04T20:28:18.237 に答える
1

まず、このコンテンツが動的にまたはライブで追加されていない場合（つまり、コンテンツが元のHTMLロードでロードされている場合）、. live（）関数を使用する必要はありません。

また、なぜ.closest（）を使用しているのですか？あなたはただすることができませんでした：

 <img class="main_item_pic" ref='pic1' src="blah.jpg" />
 <a ref='pic1' href="#" class="add_to_list">
    <img src="add_icon.gif" />Add to List
 </a>


$('a.add_to_list').click(function(){
 var ref  = $(this).attr('ref');
 var src  = $("img[ref='" + ref + "']").attr('src');
 var name = $('h6 a').text();
});
于 2011-06-04T20:32:15.990 に答える
1

このclosestメソッドは、渡したセレクターに一致する最も近い祖先のみを検索します。h6とimgあなたが探しているのはあなたがそれを呼んでいる要素の祖先ではないので、それはそれらを見つけられません。必要なのは、検索元の要素と検索しようとしている要素の両方を含む最も近い要素を見つけて、検索の中間ステップとして使用することです。


var name = $(this).closest('.main_page_entry').find('h6').text();
var source = $(this).closest('.main_page_entry').find('.main_item_pic').attr('src');
于 2011-06-04T20:37:13.083 に答える
0

メソッドclosest（）は、祖先を探します。あなたのh6とimgはあなたのリンクの祖先ではありません。

また、$（'h6'）。html（）ではなく$（'h6 a'）。html（）が必要だと思います

于 2011-06-04T20:33:19.667 に答える