获取同一类的多个元素-JavaScript（getElementsByClass）

我有一个“a href”作为标题

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

我想根据标题的第一个单词显示图像。

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

这些是项目单元格，它们使用要生成的相同模板，因此类始终相同。有很多。 到目前为止，我的脚本正在运行，但仅适用于列表中的第一个产品（显示正确的徽标）

函数getlogo（）{ var string1=document.getElementsByClassName（'title'）[0].innerHTML； var vendor=string1.replace（/（[a-z]+）.*（[a-z]+）/i，“$1”）.toLowerCase（）； document.getElementsByClassName（'logo'）[0].innerHTML=''； 函数imgError（图像）{ image.onerror=“”； image.src=“default.jpg”； 返回true； } } getlogo（）； 我环顾了四周，但确定了如何循环这个问题，或者即使这是解决方案

---

如果您使用jQuery的每一个函数，都很容易

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);">');
    });
});

函数imgError（图像）{
image.onerror=“”；
image.src=“default.jpg”；
返回true；
}
$（文档）.ready（函数（）{
$（“.title”）。每个（函数（）{
var string1=$（this.text（）；
var vendor=string1.replace（/（[a-z]+）.*（[a-z]+）/i，“$1”）.toLowerCase（）；
$（this.html（“”）；
});
});

也可以使用纯javascript实现，但将逻辑放入循环中，并将[0]替换为循环索引

更新-以下是如何保留当前文本链接：

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);">');
    });
});

函数imgError（图像）{
image.onerror=“”；
image.src=“default.jpg”；
返回true；
}
$（文档）.ready（函数（）{
$（“.title”）。每个（函数（）{
var string1=$（this.text（）；
var vendor=string1.replace（/（[a-z]+）.*（[a-z]+）/i，“$1”）.toLowerCase（）；
var html=$（this.parent（）.html（）；
$（this.parent（）.html（html+'
'）；
});
});

您可以使用for循环来运行代码，以获得

getElementsByClassName

结果的不同索引。看你的

您还可以放弃

getElementByClassName

，我认为它在某些浏览器中支持不多，性能也不是特别好，如果您的结构总是相同的话，您可以使用JavaScript导航DOM，如果您想要一个库使其更简单，甚至可以使用jQuery

---

但到目前为止，最好的方法是在最初生成时执行。您是如何生成代码的？您是否可以不使用它来实现您试图实现的目标？

我假设您尝试过类似的操作：

var elements=document.getElementsByClassName（'logo'）；对于（vari=0i

？，jQuery也大大简化了这一过程<代码>jQuery（'.logo'）。每个（函数（索引，元素）{…}）这太棒了！但是我想把文字和图片放在另一个分区里。谢谢。我确实采纳了你的建议，从消息来源而不是从标题中提取了这个男人的名字。

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);">');
    });
});