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>

它由一个包含两个较小的大 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');

但是哦，好吧……到目前为止还没有运气。有任何想法吗？提前致谢！

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方法只找到与您传递给它的选择器匹配的最近的祖先。因为你正在寻找的h6andimg不是你调用它的元素的祖先，所以它不会找到它们。您需要找到包含您正在搜索的元素和您尝试查找的元素的最接近的元素，并将其用作搜索的中间步骤：


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

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

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

于 2011-06-04T20:33:19.667 回答