Question

我想找到课程＆＃34;附件＆＃34;，如果它的内容包含字符串＆＃34; .csv＆＃34;，则添加一个类＆＃34; icon-file -excel＆＃34;

HTML

<div id="attachments">
    <a class="attachment" href="#">ContentLink__c.csv — application/vnd.ms-excel 11517 bytes —</a>
    <a class="attachment" href="#">LTC.txt — text/plain 18349 bytes —</a>
</div>

JS

var att = document.getElementsByClassName('.attachment');
if (att.innerHTML.indexOf(".csv") != -1) {
    att.className = attachment.className + " icon-file-excel";
}

Answer 1

您需要循环结果。 getElementsByClassName会返回HTML collection。这是一个包含一个或多个元素的数组对象。

其他一些编辑：

document.getElementsByClassName('attachment');请勿在此处使用点。只是classname
选择[index]
att[i].className += " icon-file-excel";只需使用+=将字符串附加到班级名称。

var att = document.getElementsByClassName('attachment');

for (var i = 0; i < att.length; i++)
{
   if (att[i].innerHTML.indexOf(".csv") != -1) {
     
       att[i].className += " icon-file-excel";
   }
}

.icon-file-excel {
    color: green;
}

<div id="attachments">
    <a class="attachment" href="#">ContentLink__c.csv — application/vnd.ms-excel 11517 bytes —</a>
    <a class="attachment" href="#">LTC.txt — text/plain 18349 bytes —</a>
</div>

一些改进提示：

而不是document.getElementsByClassName，您可以使用document.querySelectorAll，它允许您选择 css选择器，如.attachments，并返回HTML集合。
使用classList添加和删除元素中的类。比附加字符串更强大。

Answer 2

getElementsByClassName返回匹配元素的array-ish列表。你不能把它当成一个元素。由于它是类似数组的，你必须循环该数组并对每个数组的元素进行字符串测试。

var atts = document.getElementsByClassName('.attachment');
for (i = 0; i < atts.length; i++) {
   if (atts[i].innerHTML etc...) { 
       atts[i].className = ...
   }
}

Answer 3

您需要遍历所选元素。可能会有很多。
您使用的是不一致的变量名称。
在提供给getElementsByClassName()的字符串中不应该有一个点。

var attachments = document.getElementsByClassName('attachment');
for (var i = 0; i < attachments.length; i += 1) {
    att = attachments[i];
    if (att.innerHTML.indexOf(".csv") !== -1) {
        att.className = att.className + " icon-file-excel";
    }
}

在较新的浏览器中，您可以使用更健壮的.classList：

if (att.innerHTML.indexOf(".csv") !== -1) {
    att.classList.add("icon-file-excel");
}

如何使用JS基于内容向div添加类？

3 个答案: