Блог

Главная - Вопросы по программированию - getElementsByClassName плюс фильтр значений данных внутри этого элемента?

getElementsByClassName плюс фильтр значений данных внутри этого элемента?

#javascript #jquery #contains #getelementsbyclassname

#javascript #jquery #содержит #getelementsbyclassname

Вопрос:

Мне нужно добавить фильтр к функции.

У меня есть разные элементы на странице с классом a-text-center table-border , но мне нужен код, работающий только в том случае, если значение элемента равно> 1, поэтому сценарий не повлияет на другие элементы.

Я не могу ничего добавить в код, например, идентификатор или что-либо еще к элементу, чтобы отличить его от других, поэтому единственный способ отличить его — использовать value число внутри этого элемента.

Пример элемента:

 <td class="a-text-center table-border">4</td>

В этом случае значение равно 4 .

Это сценарий:

 $(document).ready(function() {
  var x = (document).getElementsByClassName('a-text-center table-border');
  for (var i = 0; i < x.length; i  )
    x.item(i).className  = " bordertopred";

Комментарии:

1. Почему document в скобках?

2. Почему if оператор здесь не работает?

Ответ №1:

Во-первых, обратите внимание, что td элементы не имеют value . То, что вы пытаетесь прочитать, — это innerText элемент. Это можно сделать с помощью filter() после выбора необходимых элементов из DOM.

Также обратите внимание, что если вы включите jQuery на страницу, вы также можете использовать его для выполнения того, что вам требуется. Ниже приведены две версии кода, одна из которых использует jQuery, а другая — обычный JS.

Сначала простой JS:

 document.addEventListener('DOMContentLoaded', () => {
  let valueToMatch = '4';
  let elements = Array.from(document.querySelectorAll('.a-text-center.table-border')).filter(el => el.innerText.trim() === valueToMatch);
  elements.forEach(el => el.classList.add("bordertopred"));
}); 
 td {
  padding: 10px; 
}
.bordertopred {
  background-color: #CC0;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="a-text-center table-border">1</td>
    <td class="a-text-center table-border">2</td>
    <td class="a-text-center table-border">3</td>
    <td class="a-text-center table-border">4</td>
  </tr>
</table>

Это было бы эквивалентом jQuery:

 jQuery($ => {
  let valueToMatch = '4';
  $('.a-text-center.table-border').filter((i, el) => el.innerText.trim() === valueToMatch).addClass('bordertopred');
}); 
 td {
  padding: 10px; 
}
.bordertopred {
  background-color: #CC0;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<table>
  <tr>
    <td class="a-text-center table-border">1</td>
    <td class="a-text-center table-border">2</td>
    <td class="a-text-center table-border">3</td>
    <td class="a-text-center table-border">4</td>
  </tr>
</table>

Комментарии:

1. » Коллекция, возвращаемая из getElementsByClassName(), не имеет метода items()». нет, это не множественное число, но HTMLCollection#item() оно существует.

2. @VLAZ очень хороший момент — я обновлю ответ

3. » это должно быть item()». это то, что уже использует OP…

4. » getElementsByClassName() принимает только один класс » — он работает с несколькими классами. Я все же предложил querySelectorAll бы здесь, поскольку это понятнее, но текущий код не ошибочен.

5. @VLAZ Я почти уверен, что вопрос был отредактирован ninja, пока я отвечал, поскольку OP добавил примечание о том, что «значение» на самом деле является текстом td ячейки. Я снова отредактировал вопрос, чтобы дать более четкое объяснение исходных проблем

Ответ №2:

Я не понимаю. Вы не можете добавить if оператор в свою функцию?

 <script>
$(document).ready(function(){
    var x = (document).getElementsByClassName('a-text-center table-border');
for(var i = 0; i < x.length; i  ) {
   if (i > 1)
     x.item(i).className  = " bordertopred";
}
</script>

Также я был бы склонен использовать x.item(i).className.add('yourclass');

Комментарии:

1. Если я не ошибаюсь, это пропустит только первый элемент внутри массива. Ваш оператор if должен проверять атрибут value каждого элемента вместо индекса.

2. Мне очень нравится опция «если», однако она не работает, код по-прежнему добавляет класс к любому td, соответствующему className, он не ограничивается только указанным внутренним текстом. Что, если мы ограничим работу только innerText = 4 ?

Метки: