How to select all images without the first one?

Question

i've got the following problem. Downloaded one script, and it's loading all images from div's body. I want to add one more image here, which won't be processed by the script.

It's like that in code:

<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>

So my question is, how to select in jquery all of these images EXCEPT the "ADDITIONAL.jpg" one?

My second question is how to select it in natural JavaScript by using one of the GetElementsBy functions.

Answer 1

You can use a combination of the :not() pseudo and the :first selector:

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

I guess my vanilla js solution alongside HTML5 would look like:

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

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

---

update:

I'd also agree that in this particular instance, the jQuery .slice(1) is more sexy (and also faster), that is

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

But this will only work if you're cutting the first item. With those pseudo selectors you could also easily cut away, lets say the second node like using img:not(:eq(1)). While this is also possible with .slice(), it would get a lot more tricky to do so.