Javascript 如何使用JQuery从遥远的元素中获取imgsrc和文本？

我在获取标题文本和图像元素源时遇到了一些问题，为了创建所单击项目的列表，请您帮忙。但我会用一些代码更好地解释：

首先，我有一个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>

---

但是，哦，好吧，到目前为止，运气不好。有什么想法吗？提前谢谢

尝试返回顶部并沿右侧DOM分支再次向下：

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

将通过您的祖先进入DOM树：

获取与选择器匹配的第一个祖先元素，从当前元素开始，通过DOM树向上

所以它不会跨越任何兄弟分支。然后，一旦您找到了相应的祖先，您就可以使用返回，

find

与

$（）

类似，但使用指定的元素而不是

document

作为根：

获取当前匹配元素集中每个元素的子元素，并通过选择器、jQuery对象或元素进行筛选

---

尝试返回顶部并沿右侧DOM分支再次向下：

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

将通过您的祖先进入DOM树：

获取与选择器匹配的第一个祖先元素，从当前元素开始，通过DOM树向上

所以它不会跨越任何兄弟分支。然后，一旦您找到了相应的祖先，您就可以使用返回，

find

与

$（）

类似，但使用指定的元素而不是

document

作为根：

获取当前匹配元素集中每个元素的子元素，并通过选择器、jQuery对象或元素进行筛选

---

首先，如果此内容不是以动态或实时方式添加的（换句话说，如果内容是以原始HTML加载的），则不必使用.live（）函数

还有，为什么要使用.nestest（）？你就不能这样做：

 <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();
});

$（'a.add_to_list'）。单击（函数（）{
var ref=$（this.attr（'ref'）；
var src=$（“img[ref='“+ref+']”）attr（'src'）；
变量名称=$（'h6 a'）.text（）；
});

首先，如果此内容不是以动态或实时方式添加的（换句话说，如果内容是以原始HTML加载的），则不必使用.live（）函数

还有，为什么要使用.nestest（）？你就不能这样做：

 <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();
});

$（'a.add_to_list'）。单击（函数（）{
var ref=$（this.attr（'ref'）；
var src=$（“img[ref='“+ref+']”）attr（'src'）；
变量名称=$（'h6 a'）.text（）；
});

方法closest（）查找祖先。你的h6和img不是你链接的祖先

另外，我猜您不想要$（'h6'）.html（），而是想要$（'h6 a'）.html（）

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

---

另外，我猜您不需要$（'h6'）.html（），而是$（'h6 a'）.html（）

最近的方法只找到与您传递的选择器匹配的最近的祖先。因为您要查找的

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

---

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

---

陛下起初它不起作用，但我才意识到这是由于一种类型。。。谢谢你…这是真的。看来我很晚才这么做嗯。。。起初它不起作用，但我才意识到这是由于一种类型。。。谢谢你…这是真的。似乎我最近经常这样做，我有很多div都有一个“main_item_pic”类，所以我想我必须区分我指的是哪一个。从…起。。嗯。我认为当我与一个按钮交互时，发生了一些事情（比如从dom中创建或删除项），这是动态的。但老实说，我不知道。我仍然是一个n00b。在这种情况下，看起来唯一“动态”添加到页面中的是列表项。link、h6、img和img容器div都是初始DOM的一部分。因此，您需要使用.live（）的唯一时间是在您希望单击列表项并对其进行处理时。对于“main_item_pic”类的许多潜水，您是对的，如果您有许多，则需要区分它们。我通常喜欢为此使用

ref

属性。在img标签中添加

ref='pic1'

。我将修改我的帖子，向你展示如何使用“ref”属性。我知道你是如何使用ref的，但我现在觉得它像是另一个类似于“id”的属性，不是吗？我需要研究一下，我猜，我有很多div都有一个“main_item_pic”类，所以我想我必须区分我指的是哪一个。从…起。。嗯。我认为当我与一个按钮交互时，发生了一些事情（比如从dom中创建或删除项），这是动态的。但老实说，我不知道。我仍然是一个n00b。在这种情况下，看起来唯一“动态”添加到页面中的是列表项。link、h6、img和img容器div都是初始DOM的一部分。因此，您需要使用.live（）的唯一时间是在您希望单击列表项并对其进行处理时。对于“main_item_pic”类的许多潜水，您是对的，如果您有许多，则需要区分它们。我通常喜欢我们