如何检索html5 <nav>标记</nav>下的所有项目

Question

标记式：

<nav id="gallery">
    <a><img src="images/ThumbImages/thumb_1.jpg" id="1"/></a>
    <a><img src="images/ThumbImages/thumb_2.jpg" id="2" /></a>
    <a><img src="images/ThumbImages/thumb_3.jpg" id="3"/></a>
    <a><img src="images/ThumbImages/thumb_4.jpg" id="4"/></a>
    <a><img src="images/ThumbImages/thumb_5.jpg" id="5"/></a>
    <a><img src="images/ThumbImages/thumb_6.jpg" id="6"/></a>
    <a><img src="images/ThumbImages/thumb_7.jpg" id="7"/></a>
    <a><img src="images/ThumbImages/thumb_8.jpg" id="8"/></a>
    <a><img src="images/ThumbImages/thumb_9.jpg" id="9"/></a>
    <a><img src="images/ThumbImages/thumb_10.jpg" id="10"/></a>
</nav>

尝试像这样检索：

jQuery：

var elem = $("#gallery");

但是，在调试期间，它表示elem长度为1。

如何检索elem中的所有图片？

Answer 1

使用：

var elem = $("#gallery img");

将为您提供ID为gallery的元素内的所有图片。

---

您也可以使用each()迭代所有图片：

elem.each(function(){
  // do something with each image
});

---

如果您愿意，可以look at documentation了解有关选择器的更多信息：）

Answer 2

使用以下代码：

var elemImgs = $("#gallery img");

$('#gallery')的长度只有1，因为您明确要求#gallery节点本身而不是它的子节点。

Answer 3

$("nav#gallery  a").each(function(){
  // anchor text
    console.log($(this).text());
  // image src
    console.log($(this).find('img').attr('src'));
});