使 getElementsByClassName 在同名的 2 类之间不同

Question

我得到一个 HTML 页面，其中有两个 div/class 元素同名，名为 "notifications"。不过，我只想算后面的，不想算第一个。

第一个看起来像这样：

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

应该排除这个。

后面的是这样的：

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

现在我收到这样的通知

document.getElementsByClassName("notification");

如果我循环浏览它，它会 returns“1”，然后是“2 个通知”。

我宁愿只收到“2 条通知”，或者最好只收到整数 2。

我如何设法做到这一点？我真的运行没主意了：/

Answer 1

最好加一个class来区分它们（这就是它们的作用），但如果必须，你可以使用document.querySelectorAll()来匹配你想要的特定的寻找：

document.querySelectorAll("div .notification")

这只会匹配 div 与 notification class。

var elementsWanted = document.querySelectorAll("div .notification");

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

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

Answer 2

我不得不说这是一个奇怪的设置，但这里有一个方法：

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

Answer 3

试试这个，这里我们先得到所有的notification类，x.length给出notification类的总数[=16] =].然后根据它的索引（基于零的索引）做你的事情。

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

使 getElementsByClassName 在同名的 2 类之间不同

Make getElementsByClassName differ between 2 classes with the same name

html

javascript

class

使 getElementsByClassName 在同名的 2 类 之间不同

Make getElementsByClassName differ between 2 classes with the same name

html

javascript

class

使 getElementsByClassName 在同名的 2 类之间不同