Question

我做了很多搜索，但都空了。我以为我可以通过做类似的事情来从.children()中生一个特定的孩子：

.children("span.some-class a img");

实际上，当我将其输出到控制台时，我可以看到该对象。但是，我不能做这样的事情：

.children("span.some-class a img").attr("src");

它似乎是不确定的。因此，我有两个问题：1）.children("span.some-class a img");是什么类型的对象，以及2）如何获取我要访问的URL？

<li>
    <span class="some-class">
        <a href="#"><img src="img/photo.png" alt=""></a>
    </span>
    <span class="some-class-1">
        <a href="#">Item</a>
        <span>Quantity: 400</span>
    </span>
    <span class="some-class-2">
        <a id="foo" href="#"><i class="yet-another-class"></i></a>
    </span>
</li>

任何指导都是值得赞赏的。

提前加油！

Answer 1

1）这是一个jQuery对象，代表与选择器匹配的所有子代的集合。它可能是一个空集合。您可以使用.length找出匹配的元素数。

.children("span.some-class a img").length

2）.attr()从集合的第一个元素返回属性的值。在两种情况下，它将返回undefined：如果集合为空（上面的.length返回0）或从未在元素上设置属性。

Answer 2

如果您像以前一样仅使用JQuery，则会为选择器获得一个Array<JQuery>。

也许我的解决方案可以帮助您了解分解为HTMLElement并分几个步骤进行操作时的工作原理。

HTML：

<!-- ... -->
<span class="some-class">
  <a href="#">
    <img src="img1.png" />
  </a>
  <a href="#">
    <img src="img3.png" />
  </a>
</span>

<span class="some-class">
  <a href="#">
    <img src="img2.png" />
  </a>
</span>
<!-- ... -->

Typescript（如果删除类型定义: HTMLElement，则在js中也适用）

// ...
$('span.some-class').find('a').each((i, linkElement: HTMLElement) => {
  $(linkElement).find('img').each((i, imgElement: HTMLElement) => {
    console.log($(imgElement).attr('src'));
  });
});
// ...

我拥有哪种物品？

2 个答案: