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

Raw JavaScript

The raw JavaScript version uses document.getElementById and Element#getElementsByTagName and then skips the first one:

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

Starting the loop with index = 1 skips the first one (which would be index = 0).

Or you can get really tricky, but I’d test it thoroughly on your target browsers:

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

That works because according to the specification, Array.prototype.slice must allow the object it’s working with to be something other than an array, as long as it supports the operations listed in the specification for the slice method. And the NodeList returned by getElementsByTagName does, so we can call slice passing it the NodeList as the this value and telling it we want a slice starting with index 1. But note that the spec also quite clearly says “…Whether the slice function can be applied successfully to a host object is implementation-dependent.” and NodeList is a host-provided object, hence the recommendation to test thoroughly in your target environments.

jQuery

In jQuery, there are lots of ways to do it. My favorite would probably be the one Rui pointed to, using slice:

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