使 getElementsByClassName 定位到每个元素

Question

我试图让这个脚本以相同的 class 名称定位我的两个 class 元素，但它只定位第一个。我怎样才能使它以相同的 class 名称同时或所有 classes 为目标？

https://jsfiddle.net/cprtkhmd/2/`

var d = new Date();
var month = d.getMonth() + 1; //.getMonth() is 0-11
var day = d.getDate();

if (day < 10) {
  day = '0' + dd;
}

if (month < 10) {
  month = '0' + month;
}

if (document.getElementsByClassName( 'date-display-single day' )[0].innerHTML == `${day}.${month}`) {
  document.getElementById("mydivid").className += " today";
}

.today {
  border: 2px solid red;
  color: red;
}

<div id="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

<div id="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

`

Answer 1

您遇到的问题是页面上的 id 属性不唯一。所有 id 值对于 DOM 应该是唯一的。

请参见下文，了解通过引用父节点来解决此问题的示例。本质上，您可以遍历具有给定 class 名称的所有元素并访问 parentNode 属性以访问其父元素以修改 CSS.

var elements = document.getElementsByClassName( 'date-display-single day' );

for(var i=0; i<elements.length; i++) {
    if(elements[i].innerHTML == `${day}.${month}`) {
        elements[i].parentNode.className += " today";
    }
}

Answer 2

你很接近，但你只需要添加一个循环并稍微更改 HTML。元素 ID 在 HTML 中应该是唯一的，因此我建议更新为 <div class="mydiv">。

我在您的代码中添加了一个循环并将选择器更改为 getElementsByClassName。这样做意味着您获得了一个 div 的集合，您可以遍历并设置 class。我的示例遍历 divs 然后检查每个条件：

var mydivs = document.getElementsByClassName("mydiv");
for(var i = 0; i < mydivs.length; i++) {
  if (mydivs[i].children[0].innerHTML == `${day}.${month}`) {
     mydivs[i].className += " today";
  }
}

请参阅下面的更新代码段：

var d = new Date(2019, 1, 24);
var month = d.getMonth() + 1; //.getMonth() is 0-11
var day = d.getDate();

if (day < 10) {
  day = '0' + dd;
}

if (month < 10) {
  month = '0' + month;
}

 var mydivs = document.getElementsByClassName("mydiv");
 for(var i = 0; i < mydivs.length; i++) {
     if (mydivs[i].children[0].innerHTML == `${day}.${month}`) {
        mydivs[i].className += " today";
     }
 }

.today {
  border: 2px solid red;
  color: red;
}

<div class="mydiv">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

<div class="mydiv">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

Answer 3

getElementsByClassName returns 一个类似数组的列表结构。当您在其上使用 [0] 时，您正在对该列表中的第一个元素进行操作。要对所有这些进行操作，请像对任何数组一样遍历列表。

不过，您的代码还有一些其他问题：文档中不允许重复 ID，因此您将无法访问多个“#mydivid”元素。由于您已经遍历了各个子元素，因此定位父元素（使用 el.parentNode）而不是依赖于 ID 可能会更容易：

for (el of document.getElementsByClassName('date-display-single day')) {
  // removing the Date stuff, since it's not directly relevant to the question
  if (el.innerHTML === '24.02') {
    el.parentNode.className += " today"
  }
}

.today {
  border: 2px solid red;
  color: red;
}

<div><div class="date-display-single day">22.02</div></div>
<div><div class="date-display-single day">23.02</div></div>
<div><div class="date-display-single day">24.02</div></div>
<div><div class="date-display-single day">24.02</div></div>
<div><div class="date-display-single day">25.02</div></div>

因为它被标记为 jQuery，这里有一个等同于上面的单行 jQuery：

$('.date-display-single.day:contains("24.02")').parent().addClass('today')

.today {
  border: 2px solid red;
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><div class="date-display-single day">22.02</div></div>
<div><div class="date-display-single day">23.02</div></div>
<div><div class="date-display-single day">24.02</div></div>
<div><div class="date-display-single day">24.02</div></div>
<div><div class="date-display-single day">25.02</div></div>

Answer 4

在 html 中不能有超过 1 个具有相同 ID 的元素。你应该使用 class 而不是

<div id="mydivid">

使用 Jquery 更改具有相同 class 名称的元素的值。

$('.mydivid')

示例代码如下

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d = new Date();
var month = d.getMonth() + 1; //.getMonth() is 0-11
var day = d.getDate();

if (day < 10) {
  day = '0' + dd;
}

if (month < 10) {
  month = '0' + month;
}

if (document.getElementsByClassName( 'date-display-single day' )[0].innerHTML == `${day}.${month}`) {
$(".mydivid").addClass("today");
 // document.getElementById("mydivid").className += " today";
}


});
</script>
<style>
.today {
  border: 2px solid red;
  color: red;
}
</style>
</head>
<body>
<div class="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

<div class="mydivid">
    <span class="date-display-single day" property="dc:date" datatype="xsd:dateTime" content="2019-02-24T11:30:00+01:00">24.02</span>
</div>

</body>
</html>

使 getElementsByClassName 定位到每个元素

Make getElementsByClassName to target every element

javascript

getelementsbyclassname