如何选择没有第一张图像的所有图像？

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(),但这样做会变得更加棘手.

Answer 2

原始JavaScript

原始的JavaScript版本使用document.getElementById和Element#getElementsByTagName再跳过第一个:

var list, images = [], index;
list = document.getElementById("myGallery0").getElementsByTagName("img");
for (index = 1; index < list.length; ++index) {
    images.push(list[index]);
}
// Use the `images` array

index = 1跳过循环跳过第一个(可能是index = 0).

或者你可以变得非常棘手,但我会在你的目标浏览器上彻底测试它:

var images = Array.prototype.slice.call(
    document.getElementById("myGallery0").getElementsByTagName("img"),
    1);

这是有效的,因为根据规范,必须允许它使用的对象不是数组,只要它支持方法规范中列出的操作.并且返回的是,所以我们可以调用传递它作为值并告诉它我们想要一个以索引1开始的切片.但请注意,该规范也非常明确地说"...该函数是否可以成功应用于host对象依赖于实现." 并且是主机提供的对象,因此建议在目标环境中进行彻底测试.Array.prototype.slice sliceNodeListgetElementsByTagNamesliceNodeListthissliceNodeList

jQuery的

在jQuery中,有很多方法可以做到这一点.我最喜欢的可能是Rui指出的一个,使用slice:

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