Get multiple elements same class - JavaScript (getElementsByClass)

Question

I have an 'a href' that is a title.

<a href="#" class="title">Vendor1 product title</a>

I want to display an image based on the first word of the title.

<a href="#" class="title">Vendor1 product title</a>
<div class="logo"></div>
<a href="#" class="title">Vendor2 product title</a>
<div class="logo"></div>
<a href="#" class="title">Vendor3 product title</a>
<div class="logo"></div>

These are item cells and they use the same template to be generated so the classes are always the same. There are many of them. The script I have so far is working but only for the first product in the list (shows correct logo).

function getlogo() {

var string1 = document.getElementsByClassName('title')[0].innerHTML;
var vendor = string1.replace(/([a-z]+) .* ([a-z]+)/i, "$1").toLowerCase();

document.getElementsByClassName('logo')[0].innerHTML = '<img src="/myimages/' + vendor + '.jpg"  width="100px" height="50px" onerror="imgError(this);">';

function imgError(image) {
    image.onerror = "";
    image.src = "default.jpg";
    return true;
    }
}
getlogo();

I've looked around but sure how to loop this or even if that is the solution.

http://jsfiddle.net/W7bm5/

Answer 1

It's easy if you use jQuery each function.

function imgError(image) {
     image.onerror = "";
     image.src = "default.jpg";
     return true;
}

$(document).ready(function() {
    $(".title").each(function() {
        var string1 = $(this).text();
        var vendor = string1.replace(/([a-z]+) .* ([a-z]+)/i, "$1").toLowerCase();
        $(this).html('<img src="/myimages/' + vendor + '.jpg"  width="100px" height="50px" onerror="imgError(this);">');
    });
});

or you can do it with the pure javascript, but put your logics in a loop, with [0] replaced to the loop index.

Update - here's how to keep the current text links:

function imgError(image) {
     image.onerror = "";
     image.src = "default.jpg";
     return true;
}

$(document).ready(function() {
    $(".title").each(function() {
        var string1 = $(this).text();
        var vendor = string1.replace(/([a-z]+) .* ([a-z]+)/i, "$1").toLowerCase();
        var html = $(this).parent().html();
        $(this).parent().html(html + '<br /><img src="/myimages/' + vendor + '.jpg"  width="100px" height="50px" onerror="imgError(this);">');
    });
});

Answer 2

You could use a for loop to run through the code you have for a different index of the getElementsByClassName results. See your jsFiddle

You could also ditch the getElementByClassName , which I think has spotty support in some browsers and isn't especially good performance, and navigate the DOM using JavaScript if your structure is always the same, or even jQuery if you'd like a library to make it easier.

But by far the best is if you did it when it was generated in the first place. How are you generating the code and could you not use that to achieve what you are trying to achieve?