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 method通过你的祖先上升DOM树：

获取与选择器匹配的第一个祖先元素，从当前元素开始并逐步向上遍历DOM树。

因此它不会跨越任何兄弟分支。然后，一旦你在适当的祖先，你使用find返回，find就像$()但是使用指定的元素而不是document作为根：

获取当前匹配元素集中每个元素的后代，由选择器，jQuery对象或元素过滤。

Answer 2

首先，如果未动态添加此内容或以实时方式添加（换句话说，如果内容使用原始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();
});

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（）

如何使用JQuery从远程元素中获取img src和文本？

4 个答案: