Question

我有一个HTML页面，其中包含两个具有相同名称的div / class元素，名为＆＃34; notifications＆＃34;。但是，我只想计算后者，不计算第一个。

第一个看起来像这样：

<a href="mynotifcations"><div class="notification">1</div>

应该排除这一个。

后面的看起来像这样：

<div class="notiheader"><span class="notification">2 notifications</span>

现在我收到这样的通知

document.getElementsByClassName("notification");

如果我循环通过它，它会返回＆＃34; 1＆＃34;然后＆＃34; 2通知＆＃34;。

我宁愿只获得＆＃34; 2通知＆＃34;，或者更好，只是数字2作为整数。

我如何实现这一目标？我真的没有想法了：/

Answer 1

我不得不说这是一个奇怪的设置，但这是一种方式：

<script>
var special = document.querySelectorAll( "span.notification" );
alert (special[1].innerHTML);
</script>

Answer 2

最好添加一个类来区分它们（这是他们所要做的），但如果必须，可以使用document.querySelectorAll()来匹配特定的类别＃39 ;寻找：

document.querySelectorAll("div .notification")

这只会将div与notification类匹配。

＆＃13;

var elementsWanted = document.querySelectorAll("div .notification");

for(var i = 0; i < elementsWanted.length; i++){
    elementsWanted[i].style.backgroundColor = "yellow";
}

＆＃13;

<div class="notification">Span</div>
<div class="notiheader"><span class="notification">Div</span>
<div class="notiheader"><span class="notification">Div</span>
<div class="notiheader"><span class="notification">Div</span>
<div class="notiheader"><span class="notification">Div</span>

＆＃13;

Answer 3

试试这个，我们首先获取所有notification个类，x.length在html中给出notification个类的总数。然后根据其索引（基于零的索引）来做你的东西。

   function hookSecondNotification() {
        var x = document.getElementsByClassName("notification")[1];
        // x.style.backgroundColor = "red";
        // here do your stuffs.
    }

使得getElementsByClassName在具有相同名称的2个类之间不同

3 个答案: