CODEWITHSUNDEEP
jqueryhtmlgetelementbyid
TM23
TM23

Reputation: 1319

Jquery getElementById - multiple instances within one script tag?

My current script identifies an element in my HTML with this line

document.getElementById("one" ).src = images[random_no];

Is there a way to use one instance of on multiple ids - in my case image tags. This current script affects only one image with its effect. I want to use that one script to affect multiple images in my code.

document.getElementById("one, two, three" ).src = images[random_no];

I know that doesn't work :) just trying to further illustrate :)

Upvotes: 1

Views: 1271

Answers (6)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

in Jquery 

$("#one,#two,#three").attr('src',images[random_no]);

try using this code

Working Demo http://jsfiddle.net/cse_tushar/MYua5/1/

i=0;
$("#one, #two, #three" ).attr("src", function() {
    i++;
    return i+'.jpg';
});

Random generation of images

Working demo http://jsfiddle.net/cse_tushar/MYua5/3/

function randomFromInterval(from, to) {
    return Math.floor(Math.random() * (to - from + 1) + from);
}
var images = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
var len = images.length;
$("#one, #two, #three").each(function () {
    x = randomFromInterval(0, len-1);
    var img_no = (x >= 0 && x < len) ? x : randomFromInterval(0, len-1);
    $(this).attr('src', images[img_no]);
});

new code

working Demo http://jsfiddle.net/cse_tushar/MYua5/4/

var images = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
var len = images.length;
i = 0;

function getImages() {
    $("#one, #two, #three").each(function () {
        $(this).attr('src', images[i]).attr('alt', images[i]);
        if (i == len-1) {
            i = 0;
        } else {
            i++;
        }
        console.log(i);
    });
}
getImages();
setInterval(getImages, 1000);

Upvotes: 3

rudikovac
rudikovac

Reputation: 171

If you have a variable number of images and don't want to insert the id of each of them into the array, you could try using .each().

$(".class").each(function() {
    $(this).attr('src', images[random_no]);
});

You then need to add the class to the images you want, instead of using their ids.

Ref: http://api.jquery.com/jQuery.each/

However, if you definitely want to avoid using class, you can separate Ids by a comma:

$("#segement1,#segement2,#segement3").attr('src',images[random_no]);

Upvotes: 2

A. Wolff
A. Wolff

Reputation: 74420

If you don't want same image twice:

DEMO

var images = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');
$("#one, #two, #three").each(function(){
    var l = images.length,
        random_no = Math.floor(l*Math.random());    
    $(this).attr('src',images[random_no]);
    images.splice(random_no,1);    
});

Upvotes: 0

Adil
Adil

Reputation: 148110

You can use id selector and combine ids with comma using multiple selector 

$("#one, #two, #three" ).attr(href,images[random_no]);

ID Selector (“#id”)

For id selectors, jQuery uses the JavaScript function document.getElementById(), which is extremely efficient. When another selector is attached to the id selector, such as h2#pageTitle, jQuery performs an additional check before identifying the element as a match, reference.

Multiple Selector (“selector1, selector2, selectorN”)

You can specify any number of selectors to combine into a single result. This multiple expression combinator is an efficient way to select disparate elements. The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order. An alternative to this combinator is the .add() method, reference.

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1074148

The other answers here show you how to set all three to the same image.

If you want them each to get different images, then:

$("#one, #two, #three" ).attr("src", function() {
    /* ...generate new random_no here... */
    return images[random_no];
});

If you pass a function into attr as the second argument, it gets called for each element in the set, and the return value is used for the attribute value.

Upvotes: 3

Arun P Johny
Arun P Johny

Reputation: 388316

you need to use the id selector - id prefixed with # with multiple selector - selectors separated by , here

$("#one, #two, #three").attr('src',images[random_no]);

Upvotes: 2

Related Questions