Сделайте getElementsByClassName для нацеливания на каждый элемент - PullRequest
Новая
       18

Сделайте getElementsByClassName для нацеливания на каждый элемент

0 голосов
/ 24 февраля 2019

Я пытаюсь сделать этот сценарий для обоих элементов класса с одинаковым именем класса, но он предназначен только для первого.Как я могу сделать это, чтобы предназначаться для обоих или всех классов с тем же именем класса?

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>

`

Ответы [ 4 ]

0 голосов
/ 24 февраля 2019

Вы не можете иметь более одного элемента с одинаковым идентификатором в html.Вы должны использовать класс insted из 

<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>
0 голосов
/ 24 февраля 2019

Вы близки, но вам просто нужно добавить цикл и немного изменить HTML.Идентификаторы элементов должны быть уникальными в HTML, поэтому я предлагаю обновить до <div class="mydiv">.

Я добавил цикл в ваш код и изменил селектор на getElementsByClassName.Это означает, что вы получите коллекцию div s, которую вы можете перебрать и установить класс.Мой пример перебирает div s, затем проверяет условие для каждого: 

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>
0 голосов
/ 24 февраля 2019

getElementsByClassName возвращает массивную структуру списка.Когда вы используете [0], вы работаете с первым элементом в этом списке.Чтобы работать со всеми из них, выполните итерацию по списку, как и для любого массива.

Однако в вашем коде есть и другие проблемы: повторяющиеся идентификаторы не допускаются в документе, поэтому вы не будетевозможность доступа к нескольким элементам "#mydivid".Поскольку вы уже перебираете отдельные дочерние элементы, вероятно, было бы проще нацелить родительский элемент (используя el.parentNode) вместо зависимости от идентификатора: 

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>
0 голосов
/ 24 февраля 2019

Проблема в том, что у вас есть неуникальные атрибуты 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";
    }
}
...