Question

我正在尝试使此脚本以相同的类名称为目标，以我的两个class元素为目标，但它仅以第一个为目标。我该如何针对具有相同类名的两个或所有类？

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应该是唯一的。

有关通过引用父节点来解决此问题的示例，请参见下文。本质上，您可以遍历具有给定类名的所有元素，并访问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的集合，可以循环访问并设置类。我的示例遍历div，然后检查每个条件：

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

在HTML中，不能有多个具有相同ID的元素。您应该使用由

<div id="mydivid">

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

$('.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>

Answer 4

getElementsByClassName返回类似数组的列表结构。在其上使用[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>

使getElementsByClassName定位到每个元素

4 个答案: