如何使用 JQuery 從遠處元素中獲取 img src 和文本？

Question

能否請您幫忙，因為我在獲取標題文本和圖像元素來源以創建單擊項目列表時遇到了一些麻煩。 但我會用一些代碼更好地解釋：

首先，我有一個這樣的 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>

它由一個包含兩個較小的大 div 組成。 我想要做的是：當我點擊“添加到列表”鏈接時，我想只獲取里面的文本和 main_item_pic 源，以便用這兩個創建一個列表項。

所以這是我到目前為止的書面代碼：

$('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');

但是哦，好吧……到目前為止還沒有運氣。 有任何想法嗎？ 提前致謝！

Answer 1

嘗試回到頂部並沿着右側的 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 object 或元素過濾。

Answer 2

首先，如果此內容不是動態添加或以實時方式添加的（換句話說，如果內容是通過原始 HTML 加載加載的），那么您不必使用.live() function。

另外，你為什么使用.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();
});

Answer 3

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');

Answer 4

方法最接近（）尋找祖先。 您的 h6 和 img 不是您的鏈接的祖先。

另外，我猜你不想要 $('h6').html() 但 $('h6 a').html()