具有更改ID的getElementById

getElementById with changing IDs

本文关键字：getElementById ID      更新时间：2023-09-26

我需要隐藏ID中任何位置都有字符串"replies-36965584"的所有元素。

HTML:

<div id="replies-36965584_1">aaaa</div>
<div id="replies-36965584_2">aaaa</div>
<div id="replies-36965584_3">aaaa</div>
<div id="replies-36965584_4">aaaa</div>
<div id="replies-36222224_2">nnnn</div>

JavaScript:

document.getElementById("replies-36965584").style.display="none"

如何修改此JS以选择前四个元素？

您可以使用CSS和属性选择器来实现这一点。

[att^=val]

表示具有att属性的元素，其值以前缀"开头；val"；。如果"；val"；是空字符串，则选择器不表示任何内容。

来源：http://www.w3.org/TR/css3-selectors/#attribute-子字符串

jsfiddle

CSS

[id^="replies-36965584_"] {
    display: none;
}

使用jQuery是一个选项吗？如果是这样的话，这就非常简单了：

$(document).ready(function(){
    $('div[id^="replies-36965584"]').hide();
});

如果您不熟悉jQuery，这里有一个入门链接：http://learn.jquery.com/javascript-101/getting-started/

EDIT：修复语法错误。

编辑：添加jsFiddle：http://jsfiddle.net/xbVp9/

如果你不知道某些文字值，但你知道一般模式，只有数字会改变，那么我会考虑与正则表达式进行一些匹配。

你可以用痛苦的方式：

var o = document.getElementsByTagName("div");
for (var i=0;i<o.length;i++) { 
    if(o[i].id.indexOf('replies-36965584') == 0) {
        o[i].style.display = 'none';
    }
}

据我所知，使用vanilla javascript实现这一点的唯一方法是获取页面上的所有div，并测试您想要的id。

var divs = document.getElementsByTagName('div');
for (var i = 0; i < divs.length; ++i) {
    var div = divs[i];
    if (/replies-36965584/.test(div.id)) {
        div.style.display = 'none';
    }
}
相关文章：