jQuery每次迭代问题

Question

<section class="photos">
    <table>
        <tr>
            <td><a href="/a"><img src="b.jpg" /></a></td>
            <td><a href="/a"><img src="b.jpg" /></a></td>
            <td><a href="/a"><img src="b.jpg" /></a></td>
        </tr>
        <tr>
            <td><a href="/a"><img src="b.jpg" /></a></td>
            <td><a href="/a"><img src="b.jpg" /></a></td>
        </tr>
    </table>
</section>

然后我尝试迭代每个以返回链接 href 和图像 src。

$(".photos td").each(function (index, value) {
    console.log(value.a.attr('href'));
    console.log(value.img.attr('src'));
});

不幸的是，上面的伪代码不起作用。有什么想法吗？

Answer 1

您无法在 value 上运行 jQuery 方法，因为它只是一个 DOM 节点。首先用它创建一个 jQuery 对象（我更喜欢 this 而不是 value 参数，但在本例中它们是相同的）：

$('.photos td').each(function(){
    console.log( $(this).find('a').attr('href') );
    console.log( $(this).find('img').attr('src') );
});

Answer 2

Adam 已经给出了答案，但是既然我正在输入它......试试这个：（唯一的区别在于遍历部分，因为 Adam 使用“this”而我使用“value”（它们是相同的）。

$(".photos td").each(function (index, value) {
    console.log($('a', value).attr('href'));
    console.log($('img', value).attr('src'));
});

不要忘记 value 代表 dom 元素（而不是 jQuery 元素），并且 attr() 是仅适用于 jQuery 对象的 jQuery 方法。
另外，你不应该关闭你的标签吗？

Answer 3

试试这个：

$(".photos td").each(function (index, value) {
    console.log($(this).find('a').attr('href'));
    console.log($(this).find('img').attr('src'));
});