javascript - 如何选择没有第一个图像的所有图像？

Question

我遇到了以下问题。下载了一个脚本，它从 div 的主体加载所有图像。我想在这里再添加一张图片，脚本不会对其进行处理。

在代码中是这样的:

<div id="myGallery0" class="spacegallery">
<img src=ADDITIONAL.jpg alt="" atr1="1" />  
<img src=images/bw1.jpg alt="" atr1="1" />
<img src=images/bw2.jpg alt="" atr1="2" />
<img src=images/bw3.jpg alt="" atr1="3" />
</div>

所以我的问题是，如何在 jquery 中选择除“ADDITIONAL.jpg”之外的所有这些图像？

我的第二个问题是如何使用 GetElementsBy 函数之一在自然 JavaScript 中选择它。

Answer 1

您可以结合使用 :not() 伪选择器和 :first 选择器:

var $images = $('#myGallery0').find('img:not(:first)');

我想我的 vanilla js 解决方案和 HTML5 看起来像:

var images = document.getElementById('myGallery0').querySelectorAll('img');

images = Array.prototype.filter.call(images, function( node, idx ) {
    return idx > 0;
});

---

更新:

我也同意在这个特定实例中，jQuery .slice(1) 更性感(也更快)，即

var $images = $('#myGallery0 img').slice(1);

但这只有在您剪切第一个项目时才有效。使用这些伪选择器，您还可以轻松地切掉，假设第二个节点喜欢使用 img:not(:eq(1))。虽然这也可以通过 .slice() 实现，但这样做会变得更加棘手。